javascript - Show/Hide and search rows in table -

javascript - Show/Hide and search rows in table -

i have table search (show/hide rows) using quicksearch jquery plugin. in same table have show/hide rows checkbox (first column in table) checked, if user click toggle row button ( button outside table). when search info in table hidden rows (checkbox checked) become visible. how can accomplish both functionality.

where hidden rows (where checkbox checked , user has clicked 'toggle rows') remain hidden when user search info in table , vice versa.

following jquery:

$(function () { $('input#gridsearch').quicksearch('#<%=gvactivities.clientid %> tbody tr'); $('.showhiderows').click(function () { $('#<%=gvactivities.clientid %>').find("input[type=checkbox]:checked").closest('tr').toggle(); }); });

checkbox first column in gridview.

button show/hide selected rows:

<input type="button" id="btnshowhide" class="showhiderows" value="toggle selected rows" />

table structure, header , first row:

<table class="gvv1" id="maincontent_gvactivities"> <tr style="background-color: buttonface;"> <th scope="col"> &nbsp; </th> <th scope="col"> cluster </th> <th scope="col"> activity </th> <th scope="col"> info </th> <th scope="col"> target </th> <th scope="col"> achieved </th> </tr> <tr> <td> <input id="longidgeneratedbycode" type="checkbox"/> </td> <td style="width: 50px;"> er. </td> <td style="width: 250px;"> establishment </td> <td style="width: 460px;"> number of </td> <td style="width: 70px;"> text </td> <td style="width: 70px;"> text2 </td> </tr> </table>

i think can solve it,

$("#showhidetr").on("click", function(){ if($(this).is(':checked')){ $("#mytable").find("input[type='checkbox']").each(function(){ if($(this).is(':checked')){ $(this).parent().parent().hide(); } }) } else { $("#mytable").find("input[type='checkbox']").each(function(){ if($(this).is(':checked')){ $(this).parent().parent().show(); } }) } }) <input type='checkbox' id="showhidetr"> <table id="mytable"> <tr> <td><input type='checkbox'></td> <td>mary</td> </tr> <tr> <td><input type='checkbox'></td> <td>john</td> </tr> <tr> <td><input type='checkbox'></td> <td>michael</td> </tr> </table>

when click showhidetr checkbox, script looks checked checkbox in table , hide tr.

javascript jquery gridview jquery-callback