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

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

});});

第四列数据是类型，即鸡肉、烤肉串等。我只想在第 4 列包含('Chicken')的那些行中搜索。它不应在 Type 为“Kebabs”的行中搜索。上面的代码在所有行中搜索。

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>