Hi Experts,
I want to export html table to .csv file, my code is working but i want to export it with border or background color on its header. how will i do that? Please help me.
Thanks in advance. :)
Here's my code:
HTML Table:
<div id="feedback_div" style="display: none;"> <table id="tablelist" width="99%"> <tbody> <tr> <th width="200" style="text-align: center;">FULL NAME</th> <th width="180" style="text-align: center;">EMAIL ADDRESS</th> <th width="200" style="text-align: center;">HOME ADDRESS</th> <th width="150" style="text-align: center;">CONTACT NUMBER</th> <th width="350" style="text-align: center;">MESSAGE</th> </tr> <tr height="22"> <td width="200" style="text-align: center;">Name 1</td> <td width="180" style="text-align: center;">Test3@y.c</td> <td width="200" style="text-align: center;">Test3</td> <td width="150" style="text-align: center;">09156494562</td> <td width="350">message test1 </td> </tr> <tr height="22"> <td width="200" style="text-align: center;">Name 2</td> <td width="180" style="text-align: center;">Test2@y.c</td> <td width="200" style="text-align: center;">Test2</td> <td width="150" style="text-align: center;">0915423185</td> <td width="350">message test2</td> </tr> <tr height="22"> <td width="200" style="text-align: center;">Name 3</td> <td width="180" style="text-align: center;">Test4@y.c</td> <td width="200" style="text-align: center;">Test1</td> <td width="150" style="text-align: center;">091181522588</td> <td width="350">message test3</td> </tr> </tbody> </table> </div> <script>
/*-------------EXPORT TO .CSV--------------*/
function exportTableToCSV($table, filename) {
var $headers = $table.find('tr:has(th)')
,$rows = $table.find('tr:has(td)')
// Temporary delimiter characters unlikely to be typed by keyboard
// This is to avoid accidentally splitting the actual contents
,tmpColDelim = String.fromCharCode(11) // vertical tab character
,tmpRowDelim = String.fromCharCode(0) // null character
// actual delimiter characters for CSV format
,colDelim = '","'
,rowDelim = '"\r\n"';
// Grab text from table into CSV formatted string
var csv = '"';
csv += formatRows($headers.map(grabRow));
csv += rowDelim;
csv += formatRows($rows.map(grabRow)) + '"';
// Data URI
var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
$(this).attr({
'download': filename
,'href': csvData
//,'target' : '_blank' //if you want it to open in a new window
});
//------------------------------------------------------------
// Helper Functions
//------------------------------------------------------------
// Format the output so it has the appropriate delimiters
function formatRows(rows){
return rows.get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim);
}
// Grab and format a row from the table
function grabRow(i,row){
var $row = $(row);
//for some reason $cols = $row.find('td') || $row.find('th') won't work...
var $cols = $row.find('td');
if(!$cols.length) $cols = $row.find('th');
return $cols.map(grabCol)
.get().join(tmpColDelim);
}
// Grab and format a column from the table
function grabCol(j,col){
var $col = $(col),
$text = $col.text();
return $text.replace('"', '""'); // escape double quotes
}
}
$("#export").click(function (event) {
var outputFile = 'Feedback';
// CSV
exportTableToCSV.apply(this, [$('#feedback_div>table'), outputFile]);
});
</script>
