如何在javascript中显示特定的表行

Question

我想根据复选框选择显示表行，当用户选择特定国家时，我只需要显示表中的特定行

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

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;
}

<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="NORTHAMERICA" placeholder="Select Country" id="id_country_0">
NORTHAMERICA</label>
</li>
<li><label for="id_country_3"><input type="checkbox" name="country" value="ASIA" placeholder="Select Country" id="id_country_3">
ASIA</label>
</li>
<li><label for="id_country_2"><input type="checkbox" name="country" value="AMERICA" 
placeholder="Select Country" id="id_country_2">AMERICA</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">
<td>NORTHAMERICA</td>
<td>US </td>
<td>US</td>
</tr>
</tbody>

Answer 1

这是一个工作版本

我选择使用纯JavaScript。

const rows = document.querySelector("#table_id tbody").querySelectorAll("tr");
const checks = document.getElementById("id_country")
.querySelectorAll("[name=country]");
document.getElementById("id_country").addEventListener("change", function(e) {
const tgt = e.target;
if (tgt.name === "country") {
const countries = [...checks]
.filter(chk => chk.checked)
.map(({value}) => value)
/* hide if there are selected countries and if the row country is not found
in the list of checked countries */
rows.forEach(row => row.classList.toggle("hide", 
countries.length > 0 && !countries.includes(
row.querySelector("td:nth-child(3)").textContent.trim().toUpperCase())
)
)
}
})

.hide {
display: none;
}

<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">NORTHAMERICA</label>
</li>
<li><label for="id_country_3"><input type="checkbox" name="country" value="LATAM" placeholder="Select Country" id="id_country_3">LATAM</label>
</li>
<li><label for="id_country_2"><input type="checkbox" name="country" value="ASIA" 
placeholder="Select Country" id="id_country_2">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">
<td>Region</td>
<td>Area </td>
<td>NORTHAMERICA</td>
</tr>
<tr id="trow">
<td>Region</td>
<td>Area </td>
<td>ASIA</td>
</tr>
<tr id="trow">
<td>Region</td>
<td>Area </td>
<td>LATAM</td>
</tr>
</tbody>
</table>