使用jQuery对多列进行表搜索功能?
<table>
<tr>
<th><input type="text" id="search" placeholder=" live search"></input></th>
<th><input type="text" id="search" placeholder=" live search"></input></th>
</tr>
<tr><th>Unique ID</th><th>Random ID</th></tr>
<tr><td>214215</td><td>442</td></tr>
<tr><td>1252512</td><td>556</td></tr>
<tr><td>2114</td><td>4666</td></tr>
<tr><td>3245466</td><td>334</td></tr>
<tr><td>24111</td><td>54364</td></tr>
</table>
<br />
<script>
$("#search").on("keyup", function() {
var value = $(this).val();
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:first").text();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
</script>
我试图在不使用jquery插件的情况下实现搜索功能..
jsfiddle链接在这里
答案 0 :(得分:0)
使用https://api.jquery.com/index/
var inputs = $('table tr:first th input[type=text]');
var trs = $('table tr + tr + tr');
inputs.keyup(function()
{
trs.each(function()
{
var tr = $(this);
var show = inputs.toArray().every(function(input, index)
{
var value = $(input).val();
if (value === '')
{
return true;
}
var number = index + 1;
var td = tr.children('td:nth-child(' + number + ')');
var text = td.text();
return text.indexOf(value) != -1;
});
tr[show ? 'show' : 'hide']();
});
});