Я, наконец, получил это, чтобы работать, и я могу фильтровать, ища по имени. Однако я не могу его фильтровать, ища значение в любом столбце. Например, я хочу иметь возможность вводить "gmail" и показывать только те записи, которые имеют gmail в любой из ячеек таблицы в этой строке. Даже если я добавляю class="name"
для каждого td
, они не включены в поиск.
HTML:
<input type="search" id="search" placeholder="Search table by name">
<table caption="Data type 1" sortable id="name_table"><col width="20%"><col width="20%"><col width="15%"><col width="20%"><col width="25%">
<thead>
<tr>
<th>Name</th><th>Address</th><th>Job No.</th><th class="no-sort">Phone</th><th>Email</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">End of records</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="name">John Smith</td><td>123 Fake Street</td><td>Job 117</td><td>0405788996</td><td>[email protected]</td>
</tr>
<tr>
<td class="name">Jane Smyth</td><td>1234 False Road</td><td>Job 118</td><td>0405788555</td><td>[email protected]</td>
</tr>
<tr>
<td class="name">Alexey Fadeev</td><td>12 Dubio Lane</td><td>Job 119</td><td>0405788966</td><td>[email protected]</td>
</tr>
</tbody>
</table>
Javascript:
<script>
// Table Search
$('#search').keyup(function() {
var regex = new RegExp($('#search').val(), "i");
var rows = $('table tbody tr');
rows.each(function (index) {
name = $(this).children(".name").html()
if (name.search(regex) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
</script>
Мне бы хотелось добавить класс в каждый столбец или ячейку внутри <tbody>
я хочу включить в поиск. Какие-нибудь советы?
При использовании метода .html()
он возвращает HTML первого элемента в стеке. Могу ли я предложить вам изменить эту строку:
name = $(this).children(".name").html();
к этому:
name = $(this).text();
вы не включаете весь текст в tr
$(this).html(); or $(this).text();
вместо
name = $(this).children(".name").html();