【发布时间】：2019-01-02 22:40:40
【问题描述】：
如果您将列表粘贴到搜索框中，则在以下 DEMO 中：
00001, 00002, 00003, 00004, 00005, 00006, 00007, 00008, 00009, 00010, 00011, 00012, 00013
它将从位于此处的 JSON 文件中提取相应的属性特征： https://api.myjson.com/bins/f2nos
var data = {};
$(document).ready(function () {
$("#Search").click(function (any) {
$("tbody").empty();
var searchIds = new Set($('#searchBox').val().split(/[ ,\r\n]+/).map(s => s.trim()));
searchIds.forEach(CODE =>
$("tbody").append('<tr>' + `<td class="theader1" id="theader1">${CODE}</td>` + `<td class="theader2" id="theader2">${datab[CODE]}</td>` + `<td class="theader3" id="theader3">${datac[CODE]}</td>` + `<td class="theader4" id="theader4">${datad[CODE]}</td>` + '</tr>'));
});
});
function getdata() {
fetch("https://api.myjson.com/bins/f2nos").then(resp => resp.json()).then(resp => {
datab = Object.assign({}, ...resp.features.map(
({ properties: { CODE, DIVISION}}) => ({ [CODE]: DIVISION}))
);
datac = Object.assign({}, ...resp.features.map(
({ properties: { CODE, PROVINCE}}) => ({ [CODE]: PROVINCE}))
);
datad = Object.assign({}, ...resp.features.map(
({ properties: { CODE, NAME}}) => ({ [CODE]: NAME}))
);
});
}
getdata();
/*Checkbox To Table Head*/
$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function(){
var column = "table ." + $(this).attr("name");
$(column).toggle();
}); <head>
<title>Code Table</title>
<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">
</head>
<body>
<span class="clearable">
<input id="searchBox" type="text" rows="25" cols="15" WRAP="HARD" placeholder="Paste the list HERE" type="search">
</span>
<button class="button button1" id="Search">Search</button>
</br>
<p><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></tbody>
</table>复选框控制表格列是否可见。
因此，如果您取消选中复选框 CODE，CODE 列将消失
一个小问题。
当我在搜索之前取消选中任何复选框时，例如 CODE，然后搜索我得到这个奇怪的表：
发生这种情况的原因是即使未选中该复选框，APPEND() 语句仍会附加 CODE 列。
那么如何将复选框状态连接到附加语句，以便即使在搜索之后也不会显示列？
我假设解决方案是将每个 Table TD 变成一个变量，并以某种方式将其连接到复选框的状态？
如何做到这一点？还是更好的解决方案？
【问题讨论】：
标签： javascript html