已修复!
您可以通过单击“CSV”按钮导出表格
/*Checkbox To Table Head*/
$(document).ready(function(e) {
$("input:checkbox:not(:checked)").each(function() {
var apndcss='';
var column = "table ." + $(this).attr("name");
apndcss+=column+"{display:none;}";
$('#appnedcss').html(apndcss)
console.log(apndcss);
});
$("#chkbtn").on('change','input',function(){
var apndcss='';
$("#chkbtn input:checkbox").each(function() {
if($(this).is(":not(:checked)")){
var column = "table ." + $(this).attr("name");
apndcss+=column+"{display:none;}";
}
})
$('#appnedcss').html(apndcss)
})
});
//Export As CSV
function download_csv(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;
// We have to create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// Make sure that the link is not displayed
downloadLink.style.display = "none";
// Add the link to your DOM
document.body.appendChild(downloadLink);
// Lanzamos
downloadLink.click();
}
function export_table_to_csv(html, 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++)
if($(cols[j]).is(':visible')) {
row.push(cols[j].innerText[0]=='0' ? ("'" + cols[j].innerText) : cols[j].innerText);
}
csv.push(row.join(","));
}
// Download CSV
download_csv(csv.join("\n"), filename);
}
document.querySelector("#CSV").addEventListener("click", function () {
var html = document.querySelector("table").outerHTML;
export_table_to_csv(html, "Code_Export.csv");
}); <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style id="appnedcss"></style>
</head>
<body>
<body>
<button class="button button2" id="CSV">CSV</button>
</br>
<p id="chkbtn">
<input type="checkbox" class="theader1" name="theader1" checked="checked"> CODE
<input type="checkbox" class="theader2" name="theader2" checked="checked"> DIVISION
<input type="checkbox" class="theader3" name="theader3" checked="checked"> PROVINCE
<input type="checkbox" class="theader4" name="theader4" checked="checked"> NAME
</p>
</br>
<table border="1px" id="data">
<thead>
<tr>
<th class="theader1" id="theader1">CODE</th>
<th class="theader2" id="theader2">DIVISION</th>
<th class="theader3" id="theader3">PROVINCE</th>
<th class="theader4" id="theader4">NAME</th>
</tr>
</thead>
<tbody>
<tr>
<td class="theader1" id="theader1">CODE</td>
<td class="theader2" id="theader2">DIVISION</td>
<td class="theader3" id="theader3">PROVINCE</td>
<td class="theader4" id="theader4">NAME</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE</td>
<td class="theader2" id="theader2">DIVISION</td>
<td class="theader3" id="theader3">PROVINCE</td>
<td class="theader4" id="theader4">NAME</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE</td>
<td class="theader2" id="theader2">DIVISION</td>
<td class="theader3" id="theader3">PROVINCE</td>
<td class="theader4" id="theader4">NAME</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE</td>
<td class="theader2" id="theader2">DIVISION</td>
<td class="theader3" id="theader3">PROVINCE</td>
<td class="theader4" id="theader4">NAME</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE</td>
<td class="theader2" id="theader2">DIVISION</td>
<td class="theader3" id="theader3">PROVINCE</td>
<td class="theader4" id="theader4">NAME</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE</td>
<td class="theader2" id="theader2">DIVISION</td>
<td class="theader3" id="theader3">PROVINCE</td>
<td class="theader4" id="theader4">NAME</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE</td>
<td class="theader2" id="theader2">DIVISION</td>
<td class="theader3" id="theader3">PROVINCE</td>
<td class="theader4" id="theader4">NAME</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE</td>
<td class="theader2" id="theader2">DIVISION</td>
<td class="theader3" id="theader3">PROVINCE</td>
<td class="theader4" id="theader4">NAME</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE</td>
<td class="theader2" id="theader2">DIVISION</td>
<td class="theader3" id="theader3">PROVINCE</td>
<td class="theader4" id="theader4">NAME</td>
</tr>
</tbody>
</table>
</body>
</html>复选框通过添加以下内容来切换列是否可见:
style="display: none;
到每个表td。
问题是，当您按下 CSV 按钮时，所有列都会被导出。
我只想导出可见的列。
怎么做？
我假设必须在此处某处添加基于 TD 样式的排除语句:
for (var i = 0; i < rows.length; i++) {
var row = [], cols = rows[i].querySelectorAll("td, th");
我尝试实现以下建议:
if($(cols[j]).is(':visible') { your push code ...}
实际语法是:
if($(cols[j]).is(':visible')) { your push code ...}
我不太擅长 JavaScript，不知道如何实现它。
最佳答案
在推送之前，您需要一个条件来检查该单元格的可见性。
if($(cols[j]).is(':visible')) { your push code ...}
关于javascript - 无法将隐藏的表列排除在导出为 CSV 之外？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54028151/