Javascript 筛选客户端上的HTML表,但导出为显示整个表的CSV
我使用以下JS代码在客户端筛选HTML表:Javascript 筛选客户端上的HTML表,但导出为显示整个表的CSV,javascript,html,Javascript,Html,我使用以下JS代码在客户端筛选HTML表: function searchAwards(){ var input, filter, table, tr, td, i; input = document.getElementById("firstName"); filter = input.value.toUpperCase(); table = document.getElementById("award_entry"); tr = table.getElementsByTa
function searchAwards(){
var input, filter, table, tr, td, i;
input = document.getElementById("firstName");
filter = input.value.toUpperCase();
table = document.getElementById("award_entry");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
这可以很好地过滤页面上的表。我还实现了几个将HTML表导出为CSV的函数。执行此功能的代码是:
function downloadCSV(csv, filename) {
var csvFile;
var downloadLink;
// CSV file
csvFile = new Blob([csv], {type: "text/csv"});
// Download link
downloadLink = document.createElement("a");
// File name
downloadLink.download = filename;
// Create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// Hide download link
downloadLink.style.display = "none";
// Add the link to DOM
document.body.appendChild(downloadLink);
// Click download link
downloadLink.click();
}
function exportTableToCSV(filename) {
var csv = [];
var rows = document.querySelectorAll("table tr");
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 file
downloadCSV(csv.join("\n"), filename);
}
这段代码向我的下载文件发送一个.csv文件,但它始终显示表中的所有记录,而不考虑在客户端上进行的过滤。是否有办法仅将客户端上显示的筛选数据发送到CSV?确保未将隐藏/筛选的元素添加到CSV结果中: 函数exportTableToCvFileName{ var csv=[]; var rows=document.querySelectorAlltable tr; 对于变量i=0;i