javascript - How to show table rows based on checkbox selected -
i have 3 check boxes of types "one", "two"and "three" , table having column 'type' contains 3 distinct values one, 2 , 3 across few rows.
requirement is, based on check boxes selected or deselected rows of table should shown value of 'type' column match check box value.
for example,
if check box "one" selected, rows having "one" type should shown.
if both "one" , "three" selected,those rows having "one" , "three" type should displayed.
again if "three" deselected, rows matching "three" type should hidden,only rows of type "one" should shown , on.
but, not able produce desired result, attached code below, can please help.
<html> <head> <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery. min.js"></script> <title>hello </title> </head> <body> <table> <tr> <td> <input type='checkbox' onclick='return filter_type(this);' name='filter' id="one" value= "one" /> 1 </td> <td> <input type='checkbox' onclick='return filter_type(this);' name='filter' id="one" value= "two" /> 2 </td> <td> <input type='checkbox' onclick='return filter_type(this);' name='filter' id="one" value= "three" /> 3 </td> </tr> </table> <table class="datatbl" border=1> <tr> <th>no.</th> <th>content</th> <th>type</th> </tr> <tr> <td>1</td> <td>this first row</td> <td>one</td> </tr> <tr> <td>2</td> <td>this second row</td> <td>two</td> </tr> <tr> <td>3</td> <td>this third row</td> <td>three</td> </tr> <tr> <td>4</td> <td>this fourth row</td> <td>one</td> </tr> <tr> <td>5</td> <td>this fifth row</td> <td>two</td> </tr> <tr> <td>6</td> <td>this sixth row</td> <td>three</td> </tr> </table> <style> .datatbl { background-color: palegreen; } </style> <script> function filter_type(box) { //alert("checked"); var cbs = document.getelementsbytagname('input'); var all_checked_types = []; for(var i=0; < cbs.length; i++) { if(cbs[i].type == "checkbox") { if(cbs[i].name.match(/^filter/)) { if(cbs[i].checked) { all_checked_types.push(cbs[i].value); } } } } //alert("all checked "+ all_checked_types); if (all_checked_types.length > 0) { $('.datatbl tr').each(function (i, row) { var $tds = $(this).find('td'), type = $tds.eq(2).text(); if (type && all_checked_types.indexof(type) >= 0) { //alert("matched"); $(this).show(); } }); } else { $('.datatbl tr').each(function (i, row) { var $tds = $(this).find('td'), type = $tds.eq(2).text(); $(this).show(); }); } return true; } </script> </body> </html> function filter_type(box) { //alert("checked"); var cbs = document.getelementsbytagname('input'); var all_checked_types = []; for(var i=0; < cbs.length; i++) { if(cbs[i].type == "checkbox") { if(cbs[i].name.match(/^filter/)) { if(cbs[i].checked) { all_checked_types.push(cbs[i].value); } } } } //alert("all checked "+ all_checked_types); if (all_checked_types.length > 0) { $('.datatbl tr').each(function (i, row) { var $tds = $(this).find('td'), type = $tds.eq(2).text(); if (type && all_checked_types.indexof(type) >= 0) { //alert("matched"); $(this).show(); } }); } else { $('.datatbl tr').each(function (i, row) { var $tds = $(this).find('td'), type = $tds.eq(2).text(); $(this).show(); }); } return true; } .datatbl { background-color: palegreen; }<html> <head> <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery. min.js"></script> <title>hello </title> </head> <body> <table> <tr> <td> <input type='checkbox' onclick='return filter_type(this);' name='filter' id="one" value= "one" /> 1 </td> <td> <input type='checkbox' onclick='return filter_type(this);' name='filter' id="one" value= "two" /> 2 </td> <td> <input type='checkbox' onclick='return filter_type(this);' name='filter' id="one" value= "three" /> 3 </td> </tr> </table> <table class="datatbl" border=1> <tr> <th>no.</th> <th>content</th> <th>type</th> </tr> <tr> <td>1</td> <td>this first row</td> <td>one</td> </tr> <tr> <td>2</td> <td>this second row</td> <td>two</td> </tr> <tr> <td>3</td> <td>this third row</td> <td>three</td> </tr> <tr> <td>4</td> <td>this fourth row</td> <td>one</td> </tr> <tr> <td>5</td> <td>this fifth row</td> <td>two</td> </tr> <tr> <td>6</td> <td>this sixth row</td> <td>three</td> </tr> </table> </body> </html>
i'd use snipped:
jquery(document).on('ready', function() { var filter_magic = function(e) { var trs = jquery('.datatbl tr:not(:first)'); trs.hide(); var showall = true; jquery('input[type="checkbox"][name="filter"]').each(function() { if (jquery(this).is(':checked')) { var val = jquery(this).val(); trs.each(function() { var tr = jquery(this); var td = tr.find('td:nth-child(3)'); if (td.text() === val) { tr.show(); showall = false; } }); } }); if (showall) { trs.show(); } }; jquery('input[type="checkbox"][name="filter"]').on('change', filter_magic); filter_magic(); }); then have remove onclick='return filter_type(this);' stuff html.
it show rows checked checkboxes, , displays rows if nothing selected. if behaviour isn't expected, simple change var showall = true; var showall = false;
and here's demo: https://jsfiddle.net/njuzzv6l/2/
Comments
Post a Comment