jQuery - find table row containing table cell containing specific text
Solution 1:
You can use filter() to do that:
var tableRow = $("td").filter(function() {
return $(this).text() == "foo";
}).closest("tr");
Solution 2:
I know this is an old post but I thought I could share an alternative [not as robust, but simpler] approach to searching for a string in a table.
$("tr:contains(needle)");
//where needle is the text you are searching for.
For example, if you are searching for the text 'box', that would be:
$("tr:contains('box')");
This would return all the elements with this text. Additional criteria could be used to narrow it down if it returns multiple elements
Solution 3:
$(function(){
var search = 'foo';
$("table tr td").filter(function() {
return $(this).text() == search;
}).parent('tr').css('color','red');
});
Will turn the text red for rows which have a cell whose text is 'foo'.
Solution 4:
This will search text in all the td's inside each tr and show/hide tr's based on search text
$.each($(".table tbody").find("tr"), function () {
if ($(this).text().toLowerCase().replace(/\s+/g, '').indexOf(searchText.replace(/\s+/g, '').toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
Solution 5:
<input type="text" id="text" name="search">
<table id="table_data">
<tr class="listR"><td>PHP</td></tr>
<tr class="listR"><td>MySql</td></tr>
<tr class="listR"><td>AJAX</td></tr>
<tr class="listR"><td>jQuery</td></tr>
<tr class="listR"><td>JavaScript</td></tr>
<tr class="listR"><td>HTML</td></tr>
<tr class="listR"><td>CSS</td></tr>
<tr class="listR"><td>CSS3</td></tr>
</table>
$("#textbox").on('keyup',function(){
var f = $(this).val();
$("#table_data tr.listR").each(function(){
if ($(this).text().search(new RegExp(f, "i")) < 0) {
$(this).fadeOut();
} else {
$(this).show();
}
});
});
Demo You can perform by search() method with use RegExp matching text