Question

我有一个显示测试结果的简单html页面。用户可以过滤任何文本上的表行（主要是测试名称）。

我想显示正确和错误答案的文字。

代码：

<!DOCTYPE html>

<head>
    <title>sample html</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#tbSearch").on("input", function() {
            searchTable($(this).val());
        });
    });

    function searchTable(inputVal) {
        var table = $("#myTable");
        table.find("tr").each(function(index, row) {
            var allCells = $(row).find("td");
            if (allCells.length > 0) {
                var found = false;
                allCells.each(function(index, td) {
                    var regExp = new RegExp(inputVal, 'i');
                    if (regExp.test($(td).text())) {
                        found = true;
                        return false;
                    }
                });
                if (found == true) {
                    $(row).show();
                } else {
                    $(row).hide();
                }
            }
        });
        showCount();
    }

    function showCount(inputVal) {
        var table = $("#myTable");
        var totalRow = table.find("tbody tr:visible").length;
        var corr = table.find("tbody tr:visible").find("td:eq(2)").find(":contains('yes')").length;
        var incorr = table.find("tbody tr:visible").find("td:eq(2)").find(":contains('no')").length;
        $('#lblCount').text("Found " + totalRow.toString() + " Correct:" + corr.toString() + " Incorrect:" + incorr.toString());
    }
    </script>
</head>

<body>
    Search
    <input id="tbSearch" type="text" />
    <span id="lblCount"></span>
    <table id="myTable">
        <thead>
            <tr>
                <th>Test Name</th>
                <th>Equation</th>
                <th>Correct</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Test-A001</td>
                <td>1+1=1</td>
                <td>no</td>
            </tr>
            <tr>
                <td>Test-A001</td>
                <td>oslo is norway capital</td>
                <td>yes</td>
            </tr>
            <tr>
                <td>Test-A001</td>
                <td>10+10=20</td>
                <td>yes</td>
            </tr>
            <tr>
                <td>Test-A001</td>
                <td>1-1=0</td>
                <td>yes</td>
            </tr>
            <tr>
                <td>Test-A002</td>
                <td>1+1=11</td>
                <td>no</td>
            </tr>
            <tr>
                <td>Test-A002</td>
                <td>1+1=2</td>
                <td>yes</td>
            </tr>
            <tr>
                <td>Test-A001</td>
                <td>11+1=11</td>
                <td>no</td>
            </tr>
            <tr>
                <td>Test-A002</td>
                <td>1/1=1</td>
                <td>yes</td>
            </tr>
            <tr>
                <td>Test-A003</td>
                <td>1-1=1</td>
                <td>no</td>
            </tr>
            <tr>
                <td>Test-A003</td>
                <td>Polyester was invented by John Whinfield</td>
                <td>yes</td>
            </tr>
            <tr>
                <td>Test-A003</td>
                <td>10+1=11</td>
                <td>yes</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

我无法获得是和没有行的计数。

var corr = table.find("tbody tr:visible").find("td:eq(2)").find(":contains('yes')").length;

请帮助纠正同样的问题。此外，如果我想在页面加载时显示相同的计数如何实现它。

Answer 1

您使用的选择器是错误的。

要获得正确的计数：

var corr = $("table tr:visible td:nth-child(3):contains('yes')").length;

要获得错误的计数：

var incorrect = $("table tr:visible td:nth-child(3):contains('no')").length;

查看直播Demo

nth-child(3)将选择每个td

中的最后一个tr

在页面加载

在ready：

中使用相同的功能

$(document).ready(function() {
    // Use same code here
});

在jquery中获取过滤器的行数

1 个答案: