Question

已修复！

您可以通过点击“ 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样式的exclude语句：

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，不确定如何实现。

Answer 1

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

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

无法将隐藏的表格列排除为无法导出到CSV吗？

1 个答案: