JSFiddle - React, Tailwind, and code Playground
by dirtyd77
HTML
<input id="searchValue" />
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>14545</td>
<td>432483</td>
<td>43843489</td>
</tr>
<tr>
<td>14545</td>
<td>432483</td>
<td>43843489</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>14545</td>
<td>432483</td>
<td>43843489</td>
</tr>
<tr>
<td>14545</td>
<td>432483</td>
<td>43843489</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>14545</td>
<td>432483</td>
<td>43843489</td>
</tr>
<tr>
<td>14545</td>
<td>432483</td>
<td>43843489</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
...JavaScript
$(function () {
$("#searchValue").keyup(function () {
var table = $(this).siblings('table').not(':hidden'),
name = $("#searchValue").val().toLowerCase();
if (!name) {
$(table).find('tr').show();
$(table).trigger('update');
} else {
var trs = $(table).find('tbody tr');
trs.each(function () {
var tr = $(this),
results = null;
results = tr.find('td').filter(function () {
var tdVal = $(this).html().toLowerCase();
return tdVal.match(name);
});
if (!results.length) {
tr.hide()
} else {
tr.show();
}
});
$(table).trigger('update');
}
});
});