{"id":6967,"date":"2023-05-06T00:34:00","date_gmt":"2023-05-06T00:34:00","guid":{"rendered":"https:\/\/codexcoach.com\/?p=6967"},"modified":"2024-04-13T19:53:50","modified_gmt":"2024-04-13T14:23:50","slug":"how-to-export-html-table-to-csv-using-jquery","status":"publish","type":"post","link":"https:\/\/codexcoach.com\/how-to-export-html-table-to-csv-using-jquery\/","title":{"rendered":"How to Export HTML table To CSV Using jQuery"},"content":{"rendered":"\n

When dealing with online applications, it is typical to need to export HTML tables to CSV format. CSV is a popular format for exchanging data across programs because it is simple to read and interpret by software tools.<\/p>\n\n\n\n

In this tutorial, we’ll teach you how to use jQuery to convert an HTML table to CSV format. The code samples supplied are merely for demonstration reasons, and you should modify them to fit your individual use case.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 1: Create an HTML table<\/h2>\n\n\n\n

We must first generate the HTML table that will be exported to CSV. A basic table is shown below.<\/p>\n\n\n\n

<div class="cxc_main">\n   <table id="cxc_exp_table" class="cxc_exp_table" cellpadding="5" border="1" cellspacing="0">\n      <thead class="thead">\n         <tr class="th-list">\n            <th class="cxc-th-company">Cxc Company<\/th>\n            <th class="cxc-th-address">Cxc Address<\/th>\n            <th class="cxc-th-contact">Cxc Contact<\/th>\n            <th class="cxc-th-country">Cxc Country<\/th>\n            <th class="cxc-th-zipcode">Cxc Zipcode<\/th>\n         <\/tr>\n      <\/thead>\n      <tbody class="tbody">\n         <tr class="tr-list">\n            <td class="cxc-company">Codexcoach<\/td>\n            <td class="cxc-address">3807 Millbrook Road<\/td>\n            <td class="cxc-contact">Maria Anders<\/td>\n            <td class="cxc-country">Germany<\/td>\n            <td class="cxc-zipcode">60515<\/td>\n         <\/tr>\n         <tr class="tr-list">\n            <td class="cxc-company">Codexcoach<\/td>\n            <td class="cxc-address">123 India Gujarat Road<\/td>\n            <td class="cxc-contact">Maria Anders<\/td>\n            <td class="cxc-country">India<\/td>\n            <td class="cxc-zipcode">12345<\/td>\n         <\/tr>\n         <tr class="tr-list">\n            <td class="cxc-company">Codexcoach<\/td>\n            <td class="cxc-address">3807 Millbrook Road<\/td>\n            <td class="cxc-contact">Maria Anders<\/td>\n            <td class="cxc-country">Germany<\/td>\n            <td class="cxc-zipcode">60515<\/td>\n         <\/tr>\n         <tr class="tr-list">\n            <td class="cxc-company">Codexcoach<\/td>\n            <td class="cxc-address">1707 Victoria Park Ave<\/td>\n            <td class="cxc-contact">Maria Anders<\/td>\n            <td class="cxc-country">Canada<\/td>\n            <td class="cxc-zipcode">M4A 2M5<\/td>\n         <\/tr>\n         <tr class="tr-list">\n            <td class="cxc-company">Codexcoach<\/td>\n            <td class="cxc-address">3807 Millbrook Road<\/td>\n            <td class="cxc-contact">Maria Anders<\/td>\n            <td class="cxc-country">United States<\/td>\n            <td class="cxc-zipcode">60515<\/td>\n         <\/tr>\n         <tr class="tr-list">\n            <td class="cxc-company">Codexcoach<\/td>\n            <td class="cxc-address">33 Jacabina Court<\/td>\n            <td class="cxc-contact">Maria Anders<\/td>\n            <td class="cxc-country">Australia<\/td>\n            <td class="cxc-zipcode">2502<\/td>\n         <\/tr>\n         <tr class="tr-list">\n            <td class="cxc-company">Codexcoach<\/td>\n            <td class="cxc-address">Navlinskaya Ul., bld. 53<\/td>\n            <td class="cxc-contact">Maria Anders<\/td>\n            <td class="cxc-country">Russia<\/td>\n            <td class="cxc-zipcode">N\/A<\/td>\n         <\/tr>\n      <\/tbody>\n   <\/table>\n   <div>\n      <button type="button" class="cxc_exp_to_csv" onclick="cxc_export_to_csv_file_fun()">Export to CSV<\/button>  \n   <\/div>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
Step 2: Write the JQuery code<\/h2>\n\n\n\n
we need to write the JQuery code that will handle the export process when the button is clicked. Here’s an example of how to do it:<\/p>\n\n\n\n
<script type="text\/javascript">\n\t\tfunction cxc_export_to_csv_file_fun() {\n\n\t\t\tvar data_arr = [];\n\t\t\tvar th_arr = [];\n\n\t\t\tif( jQuery('.cxc_exp_table .thead .th-list').length > 0 ){\n\t\t\t\tjQuery('.cxc_exp_table .thead .th-list').each(function(){\n\t\t\t\t\tvar tr_this = jQuery(this);\n\t\t\t\t\tvar cxc_th_company = tr_this.find('.cxc-th-company').text();\n\t\t\t\t\tth_arr.push( cxc_th_company );\n\t\t\t\t\tvar cxc_th_address = tr_this.find('.cxc-th-address').text();\n\t\t\t\t\tth_arr.push( cxc_th_address );\n\t\t\t\t\tvar cxc_th_contact = tr_this.find('.cxc-th-contact').text();\n\t\t\t\t\tth_arr.push( cxc_th_contact );\n\t\t\t\t\tvar cxc_th_country = tr_this.find('.cxc-th-country').text();\n\t\t\t\t\tth_arr.push( cxc_th_country );\n\t\t\t\t\tvar cxc_th_zipcode = tr_this.find('.cxc-th-country').text();\n\t\t\t\t\tth_arr.push( cxc_th_zipcode );\n\t\t\t\t\t\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif( th_arr && th_arr.length > 0 ) {\n\t\t\t\tdata_arr.push( th_arr.join(",") );\n\t\t\t}\n\n\t\t\tif( jQuery('.cxc_exp_table .tbody .tr-list').length > 0 ){\n\t\t\t\tjQuery('.cxc_exp_table .tbody .tr-list').each(function(){\n\t\t\t\t\tvar tr_this = jQuery(this);\n\t\t\t\t\tvar cxc_company = tr_this.find('.cxc-company').text();\n\t\t\t\t\tcxc_company = cxc_company.trim();\n\t\t\t\t\tvar cxc_address = tr_this.find('.cxc-address').text();\n\t\t\t\t\tcxc_address = cxc_address.trim();\n\t\t\t\t\tvar cxc_contact = tr_this.find('.cxc-contact').text();\n\t\t\t\t\tcxc_contact = cxc_contact.trim();\n\t\t\t\t\tvar cxc_country = tr_this.find('.cxc-country').text();\n\t\t\t\t\tcxc_country = cxc_country.trim();\n\t\t\t\t\tvar cxc_zipcode = tr_this.find('.cxc-country').text();\n\t\t\t\t\tcxc_zipcode = cxc_zipcode.trim();\n\n\t\t\t\t\tvar data_obj = [\n\t\t\t\t\t\t'"' + cxc_company + '"',\n\t\t\t\t\t\t'"' + cxc_address + '"',\n\t\t\t\t\t\t'"' + cxc_contact + '"',\n\t\t\t\t\t\t'"' + cxc_country + '"',\n\t\t\t\t\t\t'"' + cxc_zipcode + '"',\n\t\t\t\t\t\t];   \n\n\t\t\t\t\tdata_obj.map(string => string === null ? '' : `\\"${string}\\"`);                       \n\t\t\t\t\tdata_arr.push( data_obj.join(",") );\n\t\t\t\t\t\n\n\t\t\t\t});\n\t\t\t}\n\t\t\tdata_arr = data_arr.join('\\n');\n\n       \t\t\/\/ return false;\n        \t\/\/ Create CSV file object and feed\n        \t\/\/ our csv_data into it\n\t\t\tCSVFile = new Blob([data_arr], {\n\t\t\t\ttype: "text\/csv"\n\t\t\t});\n\n        \t\/\/ Create to temporary link to initiate\n        \t\/\/ download process\n\t\t\tvar temp_link = document.createElement('a');\n\n        \t\/\/ Download csv file\n\t\t\ttemp_link.download = "Cxc Export To CSV.csv";\n\t\t\tvar url = window.URL.createObjectURL(CSVFile);\n\t\t\ttemp_link.href = url;\n\n        \t\/\/ This link should not be displayed\n\t\t\ttemp_link.style.display = "none";\n\t\t\tdocument.body.appendChild(temp_link);\n\n        \t\/\/ Automatically click the link to\n        \t\/\/ trigger download\n\t\t\ttemp_link.click();\n\t\t\tdocument.body.removeChild(temp_link); \n\t\t\t\n\t\t}\n\n\t\tjQuery(document).ready( function() {\n\t\t\tjQuery(document).on( 'click', '.cxc_exp_table .cxc_exp_to_csv', function () {\n\t\t\t\tcxc_export_to_csv_file_fun();\n\t\t\t} );\t\n\t\t} );\n\t\t\n\t<\/script><\/code><\/pre><\/div>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
We demonstrated how to use jQuery<\/a> to convert an HTML table to CSV format. This solution is simple and straightforward to implement, and it can be tailored to different use cases by adjusting the HTML table and JavaScript code as needed.<\/p>\n\n\n\n
FAQs<\/h2>\n\n\n
\n
\n
\n
Why would I want to export an HTML table to CSV?<\/h3>\n
\n\n
There are several reasons why you would wish to convert an HTML table to a CSV file. For example, you might offer users to download data from your online application in a format that can be readily accessed and analyzed in a spreadsheet program such as Microsoft Excel or Google Sheets.<\/p>\n\n<\/div>\n<\/div>\n
\n
Do I need to use jQuery to export an HTML table to CSV?<\/h3>\n
\n\n
No, jQuery is not required to export an HTML table to CSV. jQuery, on the other hand, provides a straightforward way to modify the DOM and handle events in JavaScript, which helps simplify the exporting process.<\/p>\n\n<\/div>\n<\/div>\n
\n
How can I customize the CSV output format?<\/h3>\n
\n\n
Because the CSV output format is defined by the data in the HTML table, you must adjust the table itself if you wish to change the format.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>
<\/div>","protected":false},"excerpt":{"rendered":"
When dealing with online applications, it is typical to need to export HTML tables to CSV format. CSV is a popular format for exchanging data across programs because it is simple to read and interpret by software tools. In this tutorial, we’ll teach you how to use jQuery to convert an HTML table to CSV […]<\/p>\n","protected":false},"author":1,"featured_media":6997,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_aib_schema_json_ld":""},"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/6967"}],"collection":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/comments?post=6967"}],"version-history":[{"count":2,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/6967\/revisions"}],"predecessor-version":[{"id":13208,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/6967\/revisions\/13208"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media\/6997"}],"wp:attachment":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media?parent=6967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/categories?post=6967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/tags?post=6967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}