Skip to main content

Exporting/Download HTML Table as CSV File Using jQuery

Whenever we are working on any project generally we need to display data into the grid, and often we need to download those records as a excel or CSV file. So in our today’s article we will see how to download/export html table data as CSV file using JQuery.

In the jQuery there is a plugin called “tabletoCSV” which is very easy to use and it will done the task done.

Now lets see below I have created a simple “HTML table with Export as CSV button”

<body>
 <form id="myform" runat="server">
 <div>
 <table id="tabletodownload" style="border:1px solid #000;">
 <thead>
 <tr> <th> Customer Name </th> <th> Order Value </th> <th> Ordered On </th> </tr>
 </thead>
 <tbody>
 <tr> <td> Tarun </td> <td> $ 5,000 </td> <td> 7, Oct 2017 </td> </tr>
 <tr> <td> James <td> <td> $ 4,000 </td> <td> 10, Oct 2017 </td> </tr>
 <tr> <td> Vijay </td> <td> $ 3,000 </td> <td> 29, Sept 2017 </td> </tr>
 <tr> <td> Andy </td> <td> $ 2,000 </td> <td> 22, Oct 2017 </td> </tr>
 <tr> <td> Andrew </td> <td> $ 1,000 </td> <td> 29, Oct 2017 </td> </tr>
 </tbody>
 </table>
 <br />
 <button type="button" id="btnDownload"> Download as CSV</button>
 </div>
 </form>
</body>

 

Use below script to download the html table as csv file

<script type="text/javascript">
$(document).ready(function() {
$('#btnDownload').click(function() {
$("#tabletodownload").tableToCSV({
filename: 'CustomerList'
});
});
});
</script>

If we run this page in the browser then it will display like below screen and you can export tables as CSV by clicking on the ‘Download as CSV‘ button.

For the above example we need to reference to js file 1 is the JQuery file and another is the “tabletoCSV” plugin js file.

<script type="text/javascript" src="jquery.min.js" />
<script type="text/javascript" src="/jquery.tabletocsv.js" />

Output will be look like as below

 

You can download working example from this link

Working with select or drop-down using jQuery

In this article we are going to learn some operation on the select box using jQuery as below.

1. Add new option to a select-element with jQuery


<select id="ddlStatus"></select>

<script type="text/javascript" language="javascript" >
var status = new Array();

status.push("<option value=\"In Process\">In Process</option>");
status.push("<option value=\"On Hold\">On Hold</option>");

$("#ddlStatus").html(status.join(''));

</script>

2. Retrieve the selected single value from the select box with jQuery


$('#ddlStatus').val();

3. Retrieve the multiple selected value from the select box with jQuery


$('#ddlStatus option:selected').each(function(counter, option){
console.log($(option).val());
});

4. Sometime if you don’t want to retrieve selected value and want to get selected text then use the below code


$('#ddlStatus option:selected').text();

5. Retrieve the multiple selected text from the select box with jQuery

If you have a multiple choice element you should go with this code:

$('#ddlStatus option:selected').each(function(counter, option){
console.log($(option).text());
});

6. If you want to remove a specific option from the select box using jQuery

Below code will remove the option which has the value = 2 from the using jQuery


$('#ddlStatus option[value=2]').remove();

7. Clear a selectbox using jQuery

$('#ddlStatus').html('');

hope this will help someone 🙂

Get outer html of html element using Jquery

<div class='block'>
<p class='paragraph'> 
This is the text inside the second element
</p>
</div>

for an example if we consider above code block and write a code like below

var htmlString = $("#paragraph").html();

then htmString can have a value “This is the text inside the second element” only

now what if you want a result like “<p class=’paragraph’> This is the text inside the second element </p>”

Sometimes you will need the selected object as well, so below is a small jquery code block which will give you the complete html (outer html) of a Jquery selector.

There are 2 different ways for that, we will see both
There are two major methods used to get an objects outerHTML, we’ll be discussing both.

Getting wrapper html using the outerHTML method

var outer_element_html = $('jQuerySelector')[0].outerHTML ;
console.log(outer_element_html);

Just want to discuss 1 thing it will worked on latest browser only, if you are using 5 year old browser then may be it creates an issue

Get outer html of html element using Jquery clone method
using .clone method it will create an object copy into the memory. It will wrap into p tag around. After that we can use .html() function to get the inner html of the p tag. But if you are working with a big amount of data then cloning every element to the memory is not best way. See the below code for an example

outer_html = $('jQuerySelector').clone().wrap('<p>').parent().html();

in above code “jQuerySelector” is the selector we are using, you need to change it. If there are multiple items for selectors then you can go with .each loop and get the outerHtml of individual items.