I want to display the table row based on the checkbox selection where I need to display only the particular row. I'm noob in JavaScript and took this snippet from How to show table rows based on checkbox selected
I tried to modify the code as per the requirement but I couldn't able to figure out which I retrieve from the database
In the JS script it matching the td value but I don't mention the table value explicitly all it comes from the 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>
Your approach could possibly use some work. W3 has a good example of filtering based on inputs that could be helpful in getting you on the right track.
Below I have provided a working example, using the W3 code as a starting place. This should give you an idea how to implement your desired solution.
In the code you provided it appears that you may be working with jQuery. The solution below is pure JS and does not require any outside libraries. In addition to modifying the JS filtering function (filter_type), we moved the onclick attribute from the div holding all the checkboxes and placed it on each individual checkbox input.
<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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments