Javascript -基于复选框显示特定的表行

Question

我想根据复选框选择显示表行，其中我只需要显示特定的行。我是JavaScript新手，从如何根据选中的

复选框显示表行中获取以下代码片段我试图按照要求修改代码，但我无法找出我从数据库中检索到的

在JS脚本中，它匹配td值，但我没有明确地提到表值，它来自db。

<div>Country</div>
<div class="row" name="country_checkbox" id="id_row"  onclick="return filter_type(this);">
<ul id="id_country">
<li><label for="id_country_0"><input type="checkbox" name="country" value="AMERICA" placeholder="Select Country" id="id_country_0">
AMERICA</label>

</li>
<li><label for="id_country_3"><input type="checkbox" name="country" value="newyork" placeholder="Select Country" id="id_country_3">
newyork</label>
</li>
<li><label for="id_country_2"><input type="checkbox" name="country" value="china" 
placeholder="Select Country" id="id_country_2">china</label>
</li>

</ul>
</div>
<table class="datatable" id='table_id'> 
<thead>
<thead>
<tr>
<th>Region</th>
<th> Area </th>
<th> Country </th>
</tr>
</thead>

<tbody>
<tr id="trow">
{% for i in database%}
<td>i.Region</td>
<td>i.Area </td>
<td>i.Country</td>
</tr>
</tbody>

<script>
// checkbox selection

function filter_type(box) {
//alert("checked");
var cbs = document.getElementsByTagName('input');
var all_checked_types = [];
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == "checkbox") {
if(cbs[i].name.match(/^country/)) {
if(cbs[i].checked) {
all_checked_types.push(cbs[i].value);
}
}
}
}

if (all_checked_types.length > 0) {
$('.dataclass tr:not(:has(th))').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
if (type && all_checked_types.indexOf(type) >= 0) {
$(this).show();
}else{
$(this).hide();
}
});
}else {
$('.datatbl tr:not(:has(th))').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
$(this).show();
});
}
return true;
}  

</script>

Answer 1

您的方法可能需要一些改进。W3有一个基于输入进行过滤的好例子，它可以帮助您走上正确的轨道。

下面我提供了一个工作示例，使用W3代码作为起点。这应该给你一个如何实现你想要的解决方案的想法。

在您提供的代码中，看起来您可能正在使用jQuery。下面的解决方案是纯JS，不需要任何外部库。除了修改JS过滤函数(filter_type)之外，我们还从包含所有复选框的div中移动了onclick属性，并将其放置在每个单独的复选框输入上。

<div>Country</div>
<div class="row" name="country_checkbox" id="id_row">
<ul id="id_country">
<li><label for="id_country_0"><input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0" onclick="filter_type();">
NORTHAMERICA</label>
</li>
<li><label for="id_country_3"><input type="checkbox" name="country" value="LATAM" placeholder="Select Country" id="id_country_3" onclick="filter_type();">
LATAM</label>
</li>
<li><label for="id_country_2"><input type="checkbox" name="country" value="ASIA" placeholder="Select Country" id="id_country_2" onclick="filter_type();">ASIA</label>
</li>
</ul>
</div>
<table class="datatable" id='table_id'>
<thead>
<thead>
<tr>
<th>Region</th>
<th> Area </th>
<th> Country </th>
</tr>
</thead>
<tbody>
<tr id="trow_1">
<td>i.Region</td>
<td>i.Area </td>
<td>NORTHAMERICA</td>
</tr>
<tr id="trow_2">
<td>i.Region</td>
<td>i.Area </td>
<td>LATAM</td>
</tr>
<tr id="trow_3">
<td>i.Region</td>
<td>i.Area </td>
<td>ASIA</td>
</tr>
</tbody>

<script>
function filter_type() {
//declare variables
var inputs, input, filters, table, tr, td, i, r;
//get all checkbox inputs
inputs = document.querySelectorAll("input[type=checkbox]");
table = document.getElementById("table_id");
tr = table.getElementsByTagName("tr");
//array to hold filters
filters = [];
//loop through inputs and add value for all checked to filters
for (i = 0; i < inputs.length; i++) {
input = inputs[i];
if (input.checked) {
filters.push(input.value);
}
}
//loop through each row in table
for (r = 0; r < tr.length; r++) {
//get column to compare to, in this case the 3rd column
td = tr[r].getElementsByTagName("td")[2];
if (td) {
//get value of the column
txtValue = td.textContent || td.innerText;
//check if column value is the filters array
//or if filters array is empty, show all rows
if (filters.indexOf(txtValue) > -1 || filters.length == 0) {
//true, show row
tr[r].style.display = "";
} else {
//false, hide row
tr[r].style.display = "none";
}
}
}
}
</script>