javascript - 在 2 个相似的表上使用 javascript 表搜索

Question

我有 2 个表，它们的结构非常相似，但其中的数据不同。

我发现这个 JavaScript 可以让我在给定搜索框的情况下轻松搜索表格。我是一个 javascript 新手，这不是我在代码方面的强项。

$(document).ready(function() {
    $(".search").keyup(function() {
        var searchTerm = $(".search").val();
        var listItem = $('.results tbody').children('tr');
        var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

        $.extend($.expr[':'], {
            'containsi': function(elem, i, match, array) {
                return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
            }
        });

        $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e) {
            $(this).attr('visible', 'false');
        });

        $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e) {
            $(this).attr('visible', 'true');
        });

        var jobCount = $('.results tbody tr[visible="true"]').length;
        $('.counter').text(jobCount + ' item');

        if (jobCount == '0') {
            $('.no-result').show();
        } else {
            $('.no-result').hide();
        }
    });
});

如果页面上只有 1 个表格，则此代码可以正常工作。我的问题是，我有 2 个。

这是其中一张表，另一张表除了标题和实际数据内容之外完全相同。

<div class="form-group pull-right">
        <div class="input-group">
            <input type="text" class="search form-control" placeholder="Search:">
            <span class="input-group-btn">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#devices">
                    Add Device
                </button>
            </span>
        </div>
    </div>
    <span class="counter pull-right"></span>
    <table class="table table-responsive table-hover table-bordered results">
        <thead>
            <tr>
                <th class="col-md-3">Device #</th>
                <th class="col-md-3">Brand</th>
                <th class="col-md-3">Model</th>
                <th class="col-md-3">Color</th>
            </tr>
            <tr class="warning no-result">
                <td colspan="7"><i class="fa fa-warning"></i> No result</td>
            </tr>
        </thead>
        <tbody>

            <?

            $sql = "SELECT * FROM devices";

            if(!$result = $db->query($sql)){
                die('There was an error running the query [' . $db->error . ']');
            }

            while($row = $result->fetch_assoc()){                                   
                ?>
                <tr>
                    <th scope="row"><?=$row['uniqueID'];?></th>
                    <td><?=$row['Brand'];?></td>
                    <td><?=$row['Model'];?></td>
                    <td><?=$row['Color'];?></td>
                </tr>
                <?
            }
            ?>


        </tbody>
    </table>

我已经尝试过更改 javascript 中的选择器之类的方法，但我无法让它工作。我最终打破了它并恢复到原始代码。我不知道该怎么做。

如何更改 javascript 代码以独立处理 2 个表？

JSFiddle:https://jsfiddle.net/vdemqwLx/

Answer 1

这里的问题是，使用 $(".results tbody") 和所有其他选择器，您都选择了两个表。您只需根据生成事件的输入字段选择正确的表即可。

为了减少对 HTML 结构的依赖，我建议您使用 data 属性来标识相应的表。

<input type="text" class="search form-control" placeholder="Search:" data-table="table1" data-counter="counter1">
...
<span id="counter1" class="counter pull-right"></span>
<table id="table1" class="table table-responsive table-hover table-bordered results">
...

(其他同理)

然后在JS中，不要在整个文档中搜索，而是在这些文档中搜索

//this should go outside
$.extend($.expr[':'], {
    'containsi': function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

$(document).ready(function() {
    $(".search").on("input",function() { //input will also detect paste, undo, etc.
        //this executes for both inputs, lets get the table and counter IDs
        var tableId=$(this).data("table");
        var tableElem=$("#"+tableId); //select the table by its ID
        var counterId=$(this).data("counter");

        var searchTerm = $(this).val(); //use this, otherwise you're always getting the value of the first .search
        var listItem = $(tableElem).find("tbody").children('tr'); //now find within the table (otherwise always selects the first .resulst)
        var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

        $(tableElem).find("tbody tr").not(":containsi('" + searchSplit + "')").each(function(e) {
            $(this).attr('visible', 'false');
        });

        $(tableElem).find("tbody tr:containsi('" + searchSplit + "')").each(function(e) {
            $(this).attr('visible', 'true');
        });

        var jobCount = $(tableElem).find("tbody tr[visible='true']").length;
        $("#"+counterId).text(jobCount + ' item'); //the same with the counter

        if (jobCount == '0') {
            $(tableElem).find(".no-result").show();
        } else {
            $(tableElem).find(".no-result").hide();
        }
    });
});

测试一下，我这里直接写的。问我是否需要更多解释。