Question

我正在尝试使用以下js / jquery向我的HTML页面添加搜索功能。基本上我尝试搜索失败/传递/ F / P / FAIL / PASS措辞，我希望为查找结果打印testTitle，testAssertion和testResult行。

$("#search").on("keyup", function() {
    var value = $(this).val();
    $("table tr").each(function(index) {
        if (index !== 0) {
            $row = $(this);
            $(this).hide();
            var id = $row.find(".assertionResult").text();
            if (id.indexOf(value) === 0) {
                var x = $row.prevAll().find(".testTitle").last();
                var y = $row.nextAll().find(".testResult").first();
                console.log(y.parent().html());


                $(this).show();
                x.parent().show();
                y.parent().show();


            }

        }

    });
    });

显示元素x但不显示元素y。有什么帮助吗？

关联的HTML是：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
   <form>
      <input id="search" placeholder="Search For text..."/>
       <input id="reset" type="button" value="reset" onclick="testreset()" />
   </form>
<body>
<table  id="table" style="width:80%" align="center" border="4" data-filter="true" data-input="#">
           <tr>
            <td bgcolor="#000000"><font color="#ffffff">Head</font></td>
            <td class="testTitle" bgcolor="#000000"><font color="#ffffff">HEAD</font></td>
            <td bgcolor="#000000"></td>
         </tr>
         <tr>
            <td bgcolor="#000000"><font color="#ffffff">TC# 1[Title]</font></td>
            <td class="testTitle" bgcolor="#000000"><font color="#ffffff">TC#1</font></td>
            <td bgcolor="#000000"></td>
         </tr>
         <tr>
            <td class="assertionName">TC# 1[A-1]</td>
            <td class="assertionMessage">TC# 1A-1</td>
            <td class="assertionResult">P</td>
         </tr>
         <tr>
            <td class="assertionName">TC# 1[A-2]</td>
            <td class="assertionMessage">TC# 1 A-2</td>
            <td class="assertionResult">P</td>
         </tr>
         <tr>
            <td class="assertionName">TC# 1[A-3]</td>
            <td class="assertionMessage">TC# 1 A-3</td>
            <td class="assertionResult">F</td>
         </tr>
         <tr>
            <td  class="testName" bgcolor="#228B22">TC# 1</td>
            <td  class="testResult" bgcolor="#228B22">PASS</td>
            <td bgcolor="#228B22">P</td>
         </tr>
      </table>

</body>
</html>

此HTML有一个要输入的搜索框，我使用了js / jquery

Answer 1

当你在行中骑行时，你正在躲藏，这就是你遇到问题的原因。我认为有更简单的方法可以完成您正在尝试的内容，但是如果不过多地更改代码，您可以将jquery更改为此。请注意重新定位隐藏和更改prevAll ...

"data_val"

并摆弄https://jsfiddle.net/j32k95m7/

Answer 2

当我有超过1个带有pass / FAIL的测试用例结果时，下面的解决方案对我有用。

$("#search").on("keyup", function() {
    var value = $(this).val();
     $("table tr").hide();
    $("table tr").each(function(index) {
        if (index !== 0) {
            $row = $(this);

            var id = $row.find(".assertionResult").text();
            if (id.indexOf(value) === 0) {
                var x = $row.prevAll().find(".testTitle").last();
                var y = $row.nextAll().find(".testResult").first();
                console.log(y.parent().html());


                $(this).show();
                x.parent().show();
                y.parent().show();


            }

        }

    });
});

jquery - prevAll正在运行但不是nextAll

2 个答案: