无法将隐藏的表格列排除在导出到 CSV 之外？

Question

FIXED!固定的！

You are able to export the table by clicking "CSV" button您可以通过单击“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>

The checkboxes toggle whether or not the columns are visible or not by adding:复选框通过添加以下内容来切换列是否可见：

style="display: none;

To every table td.到每张桌子 td。

The problem is that when you press the CSV button ALL the columns are exported.问题是当您按下 CSV 按钮时，所有列都被导出。

I want only the visible columns to be exported.我只想导出可见列。

How to do that?怎么做？

I am assuming an exclude statement based on TD style has to be added somewhere here:我假设必须在此处添加基于 TD 样式的排除语句：

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

I tried implementing the suggestions below:我尝试实施以下建议：

if($(cols[j]).is(':visible') { your push code ...}

The actual syntax is:实际语法是：

if($(cols[j]).is(':visible')) { your push code ...}

I'm not that good at JavaScript, not sure how to implement this.我不太擅长 JavaScript，不知道如何实现这一点。

Answer 1

在推送之前，您需要一个条件来检查该单元格的可见性。

if($(cols[j]).is(':visible')) { your push code ...}

无法将隐藏的表格列排除在导出到 CSV 之外？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-01-03 18:55:27

无法将隐藏的表格列排除在导出到 CSV 之外？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-01-03 18:55:27

解决方案1
1 已采纳 2019-01-03 18:55:27