i’m working on a new webapp that includes several tables with different information.
there tables where i only show information but there other table where i need that users can modify values. I always used to use a code that worked fine in simple tables, but tables with inputs it doesn’t work.
i always use this script code to search values in tables, it filters results and only shows rows that contains input value.
$(document).ready(function(){
$("#inputsearch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#bodytableresults tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<table>
<thead>
<tr>
<th><input type="text" placeholder="Search...." id="inputsearch"></th>
</tr>
</thead>
<tbody id="bodytableresults">
<tr>
<th>Mike<th>
</tr>
<tr>
<th>Joan<th>
</tr>
</tbody>
</table>
it works fine in a simple table, but if i have inputs in cells, it doesn’t work.
Ex.
<table>
<thead>
<tr>
<th><input type="text" placeholder="Search...." id="inputsearch"></th>
</tr>
</thead>
<tbody id="bodytableresults">
<tr>
<th><input type="text" value="Mike"></th>
</tr>
<tr>
<th><input type="text" value="Joan"></th>
</tr>
</tbody>
</table>
it’s possible to filter rows that contains inputs inside? i mean, search value inside different inputs on table