javascript - 将过滤后的 html 表数据下载到 csv 文件

Question

我创建了一个ejs文件，可以将mongodb db集合中的文档显示到表中，并且我添加了select:option可以过滤表格。例如，select:option的date我选择05/28/2019它只会显示 05/28/2019 的数据日期。我已经有一个可以下载表格的下载表单，但是下载按钮只能下载表格中的全部数据，无法下载过滤后的数据。
我的问题是，是否有一种方法，一旦我过滤了表中的数据并单击下载，它只会下载过滤后的数据，而不是整个表。
请参阅此处的示例代码 https://jsfiddle.net/indefinite/b63y928L/9/
这是可以过滤表格的代码

$(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();
            });
    }

这就是我遵循的如何将 html 表下载到 csv 文件 https://codepen.io/malahovks/pen/gLxLWX?editors=1010
我希望一旦我选择了日期，它只会下载我选择的日期内的数据。谢谢!

Answer 1

您可以修改行选择器以仅选择可见行。 var rows = $("table tr:visible");.由于您已经在使用 jquery 库，因此可以使用 jquery 选择器。

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);
}

查看更新的 fiddle https://jsfiddle.net/165yj7se/