Quiero mostrar la fila de la tabla según la selección de la casilla de verificación donde necesito mostrar solo la fila particular de la tabla cuando el usuario selecciona el país en particular
En el script JS, coincide con el valor td, pero no menciono el valor de la tabla explícitamente, todo lo que proviene de la base de datos.
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>Aquí hay una versión de trabajo
Elegí usar JavaScript simple.
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>