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

I am searching in my table with a function:

我在我的表中搜索一个函数:

//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);

});});

Fourth coulmn of data is Type i.e. Chicken, Kebabs etc. I want to search only in those rows whose 4th column contains ('Chicken'). It should not search in rows whose Type is 'Kebabs'. The code above is searching in all rows.

第四库仑的数据是类型，例如Chicken, Kebabs等。我只想在第4列包含Chicken的行中搜索。它不应该搜索类型为“Kebabs”的行。上面的代码正在所有行中搜索。

2 个解决方案

#1

You can filter the rows and apply your code only to the filtered row like in:

您可以过滤这些行，并只将代码应用于过滤后的行，如in:

$('#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);
});

Another way to filter is based on :nth-child() Selector:

另一种筛选方法基于:nth-child()选择器:

$('#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>

#2

Use jQuery :contains(text) selector.

使用jQuery:包含(文本)选择器。

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

Working example: https://jsfiddle.net/kvvnjmup/4/

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

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

<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>

#1