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> 

CSV is just plain data, formatted in a certain way. There is no way to add style rules to it.
It's like asking if you can add fonts to a .txt file.

CSV file and excel file(.xls, ,xlsx) are they the same? or
is there a way that i export html table to excel file (.xls, .xlsx) that i can add style? because in c# i can export gridview to excel file with style. sorry if i have so many question.

Thank you.

No, they are not the same.
Formats like CSV or .txt are just data. They have no ability to store meta-information at all.
.xls and .doc, etc have the ability to store and display style rules. You can export to a speadsheet file for sure, in higher level languages like .Net and java. I doubt you'll be able to do that in javascript, I would expect it to require a post to the server, but I may be wrong.

Even if you could save the data to .xls, adding in the HTMl colours would be a bit of work due to how .xls files are written.

This article has been dead for over six months. Start a new discussion instead.