Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/398.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将过滤后的html表格数据下载到csv文件_Javascript_Jquery_Html_Html Table - Fatal编程技术网

Javascript 将过滤后的html表格数据下载到csv文件

Javascript 将过滤后的html表格数据下载到csv文件,javascript,jquery,html,html-table,Javascript,Jquery,Html,Html Table,我创建了一个ejs文件,可以将mongodb集合中的文档显示到表中,并添加了可以过滤表的select:option。例如,select:optionofdateI choose05/28/2019它将只显示日期为05/28/2019的数据。我已经有了一个可以下载表格的下载表单,但是下载按钮只能下载表格中的全部数据,不能下载过滤后的数据我的问题是,是否有一种方法,一旦我过滤了表中的数据并单击“下载”,它将只下载过滤后的数据,而不是整个表。请参见此处的示例代码 这是可以筛选表的代码 $(文档).

我创建了一个ejs文件,可以将mongodb集合中的文档显示到表中,并添加了可以过滤表的
select:option
。例如,
select:option
of
date
I choose
05/28/2019
它将只显示日期为
05/28/2019
的数据。我已经有了一个可以下载表格的下载表单,但是下载按钮只能下载表格中的全部数据,不能下载过滤后的数据
我的问题是,是否有一种方法,一旦我过滤了表中的数据并单击“下载”,它将只下载过滤后的数据,而不是整个表。
请参见此处的示例代码
这是可以筛选表的代码

$(文档).ready(函数(){
$('.filter').change(函数(){
var值=[];
$('.filter')。每个(函数(){
var colIdx=$(this).data('col');
$(this).find('option:selected')。每个(函数(){
if($(this.val()!=“”)值。推送({
text:$(this).text(),
科立德:科立德
});
});
});
过滤器('表>正文>tr',值);
});
函数过滤器(选择器,值){console.log(值);
$(选择器)。每个(函数(){
var sel=$(本);
var tokens=sel.text().trim().split('\n');
var toknesObj=[],i;
对于(i=0;i=0){
toknesObj[val.colId].found=true;
}
});          
控制台日志(toknesObj);
var计数=0;
$。每个(toknesObj,函数(i,val){
如果(找到值){
计数+=1;
}
});
显示=(计数==值.length);
show?sel.show():sel.hide();
});
}
这就是我接下来关于如何将html表下载到csv文件的内容

我希望一旦我选择了日期,它将只下载我选择的日期中的数据。谢谢大家!

您可以修改行选择器以仅选择可见行<代码>变量行=$(“表tr:可见”)。因为您已经在使用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);
}
函数将表格导出为csv(html,文件名){
var csv=[];
//var rows=document.queryselectoral(“表tr:visible”);
变量行=$(“表tr:可见”);
对于(变量i=0;i

请参阅更新的小提琴

您可以修改行选择器以仅选择可见行<代码>变量行=$(“表tr:可见”)。因为您已经在使用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);
}
函数将表格导出为csv(html,文件名){
var csv=[];
//var rows=document.queryselectoral(“表tr:visible”);
变量行=$(“表tr:可见”);
对于(变量i=0;i

查看更新的小提琴

我不知道它只需要一行代码,非常感谢!我不知道它只需要一行代码,非常感谢!