如何将表搜索限制为包含列中特定文本的特定行

Question

我在我的桌子上搜索一个函数：

//search field for table
$("#search_field").keyup(function() {
var value = this.value;

$("#menu_table").find("tr").each(function(index) {
    if (index === 0) return;
    var id = $(this).find("td").text();
    $(this).toggle(id.indexOf(value) !== -1);

});});

第四条数据是类型，即Chicken，Kebabs等。 我想只搜索第4列包含的行（＆＃39; Chicken＆＃39;）。它不应搜索类型是＆＃39; Kebabs＆＃39;的行。上面的代码正在搜索所有行。

Answer 1

您可以filter行，并仅将代码应用于已过滤的行，如：

$('#menu_table tr:gt(0)').filter(function(idx, ele) {
            return $(ele).find('td:eq(3)').text() == 'Chicken';
}).each(function(index, ele) {
    var id = $(this).find("td").text();
    $(this).toggle(id.indexOf(value) !== -1);
});

过滤的另一种方法是基于:nth-child() Selector：

$('#menu_table tr:gt(0) td:nth-child(4)').filter(function(idx, ele) {
    return ele.textContent == 'Chicken';
}).closest('tr').each(function(index, ele) {
    var id = $(this).find("td").text();
    $(this).toggle(id.indexOf(value) !== -1);
});

$('#menu_table tr:gt(0) td:nth-child(4)').filter(function(idx, ele) {
    return ele.textContent == 'Chicken';
}).closest('tr').each(function(index, ele) {
    var id = $(this).find("td:first").text();
    var typ = $(this).find("td:eq(3)").text();
    console.log('ID:' + id + ' Type: ' + typ);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="menu_table">
    <thead>
    <tr>
        <th class="centerText" data-field="item_id">ID</th>
        <th class="centerText" data-field="name">Name</th>
        <th class="centerText" data-field="price">Price</th>
        <th class="centerText" data-field="type">Type</th>
        <th class="centerText" data-field="image">Image</th>
        <th class="centerText" data-field="description">Description</th>
        <th class="centerText" data-field="cooking">Instructions</th>
        <th class="centerText" data-field="ingredients">Ingredients</th>
        <th class="centerText" data-field="warnings">Warnings</th>
        <th class="centerText" data-field="Storage">Storage</th>
        <th class="centerText" data-field="Size">Size</th>
        <th class="centerText" data-field="edit">Edit</th>
        <th class="centerText" data-field="delete">Delete</th>
    </tr>
    </thead>
    <tbody style="text-align:center;" id="menu_table_data">
    <tr>
        <td>1</td>
        <td>name</td>
        <td>price</td>
        <td>type</td>
        <td>image</td>
        <td>description</td>
        <td>instruction</td>
        <td>ingredients</td>
        <td>warnings</td>
        <td>storage</td>
        <td>size</td>
        <td>edit</td>
        <td>delete</td>
    </tr>
    <tr>
        <td>2</td>
        <td>name</td>
        <td>price</td>
        <td>type</td>
        <td>image</td>
        <td>description</td>
        <td>instruction</td>
        <td>ingredients</td>
        <td>warnings</td>
        <td>storage</td>
        <td>size</td>
        <td>edit</td>
        <td>delete</td>
    </tr>
    <tr>
        <td>3</td>
        <td>name</td>
        <td>price</td>
        <td>not Chicken</td>
        <td>image</td>
        <td>description</td>
        <td>instruction</td>
        <td>ingredients</td>
        <td>warnings</td>
        <td>storage</td>
        <td>size</td>
        <td>edit</td>
        <td>delete</td>
    </tr>
    <tr>
        <td>4</td>
        <td>name</td>
        <td>price</td>
        <td>Chicken</td>
        <td>image</td>
        <td>description</td>
        <td>instruction</td>
        <td>ingredients</td>
        <td>warnings</td>
        <td>storage</td>
        <td>size</td>
        <td>edit</td>
        <td>delete</td>
    </tr>
    </tbody>
</table>

Answer 2

使用jQuery :contains(text)选择器。

$("#menu_table").find("tr:contains('Chicken')").each(function(index) {
    if($(this).children('td').eq(3).text() == "Chicken"){
        /* Do something */
    }
});

工作示例：https://jsfiddle.net/kvvnjmup/4/

＆＃13;

＆＃13;

$('#menu_table').find('tr:contains("Chicken")').each(function(){
    if($(this).children('td').eq(3).text() == "Chicken"){
        alert($(this).prop('id'));
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="menu_table">
<tbody><tr id="1">
  <td></td>
  <td></td>
  <td></td>
  <td>Chicken</td>
  <td></td>
</tr>
<tr id="2">
  <td></td>
  <td></td>
  <td></td>
  <td>Chicken</td>
  <td></td>
</tr>
<tr id="3">
  <td></td>
  <td></td>
  <td></td>
  <td>pasta</td>
  <td></td>
</tr>
 <tr id="4">
  <td></td>
  <td></td>
  <td>Chicken</td>
  <td>pasta</td>
  <td></td>
</tr>
</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;