将经过过滤的HTML表格数据下载到CSV文件中

Question

I created an ejs file that can display the documents in the mongodb db collection into the table, and I added select:option that can filtered the table. for example, select:option of date I choose 05/28/2019 it will only display data with 05/28/2019 date. and I already have a download form that can download the table, However the download button only download the whole data in the table and cannot download the filtered data.
My question is if there is a way that once I filtered the data in the table and I click download it will only download the filtered data not the whole table.
Please see the sample code here https://jsfiddle.net/indefinite/b63y928L/9/
this is the code that can filter the table

$(document).ready(function () {

    $('.filter').change(function () {
            var values = [];

             $('.filter').each(function () {
                    var colIdx = $(this).data('col');

                     $(this).find('option:selected').each(function () {
                             if ($(this).val() != "") values.push( {
                                    text: $(this).text(),
                                    colId : colIdx
                             });
                    });
            });
            filter('table > tbody > tr', values);
    });

    function filter(selector, values) {console.log(values);
            $(selector).each(function () {
                    var sel = $(this);
                    var tokens = sel.text().trim().split('\n');
                    var toknesObj = [], i;
                    for(i=0;i<tokens.length;i++){
                            toknesObj[i] = {
                                 text:tokens[i].trim(), 
                                 found:false
                            };
                    }

                    var show = false;
                    //console.log(toknesObj);
                    $.each(values, function (i, val) {                

                 if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
                         toknesObj[val.colId].found = true;
                        }

                    });          
                    console.log(toknesObj);
                    var count = 0;
                     $.each(toknesObj, function (i, val) {
                             if (val.found){
                                     count+=1;
                             }
                     });
                    show = (count === values.length);        
                    show ? sel.show() : sel.hide();
            });
    }

and this is what I followed on how to download the html table to csv file https://codepen.io/malahovks/pen/gLxLWX?editors=1010
I expect that once I select a date it will only download the data in the date that I selected. Thank you!

Answer 1

You can modify the row selector to select only visible rows. var rows = $("table tr:visible"); . Since you are already using jquery library, you can use the jquery selector.

function export_table_to_csv(html, filename) {
    var csv = [];
    //var rows = document.querySelectorAll("table tr:visible");
    var rows = $("table tr:visible");

    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");

        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);

        csv.push(row.join(","));        
    }

    // Download CSV
    download_csv(csv.join("\n"), filename);
}

See the updated fiddle https://jsfiddle.net/165yj7se/