使用jQuery按ID搜索多个表

Net应用程序我正在使用ListView，它在浏览器中呈现多个表的HTML。我需要的是通过表内的ID进行搜索，如果ID匹配，则显示唯一具有输入给定ID的表

为简单起见，我创建了JSFIDLE，其中有两个表，当我将chassis no放入文本框时，会显示具有匹配chassis no id的表，但我无法完成简单任务，因此对此表示抱歉

这是我在浏览器中呈现的HTML

<input type="text" id="search" placeholder="  find table by Chassis No" style="width:200px"></input>
<br/>
Table 1
<table style="margin-top: 0px;" class="style1">
   <thead>
   </thead>
<tbody>
    <tr class="makeborder">
       <td style="width: 122px" rowspan="4">       
       </td>
       <td style="width: 140px;">Stock No</td>
       <td style="width: 140px;">6</td>
       <td>Make</td>
       <td>HONDA</td>
       <td> Model</td>
       <td>ACTY</td>
       <td> COLOR </td>
       <td>BAIGE/GREEN</td>
       <td><img src="flags/~\flags\japan.png"></td>
    </tr>
       <tr class="makeborder">
       <td>Price </td>
       <td style="width: 140px;"> 0.0000</td>
       <td>Fuel</td>
      <td>DIESEL</td>
        <td class="coldata">Steering </td>
        <td>LEFT</td>
        <td style="background-color:red; color:white">Chassis No</td>
        <td class="Chassis_No" style="background-color:red; color:white">7894566412</td>
        <td></td>
  </tr>
  <tr class="makeborder">
        <td >Year</td>
        <td style="width: 140px;">2013 </td>
        <td>Mileage</td>
        <td>150</td>
        <td>Type</td>
        <td>TRUCK</td>
        <td>Door/Seat</td>
        <td>3/</td>
        <td></td>
   </tr>
</tbody></table>

Table 2
<table style="margin-top: 0px;" class="style1">
   <thead>
   </thead>
<tbody>
    <tr class="makeborder">
       <td style="width: 122px" rowspan="4">       
       </td>
       <td style="width: 140px;">Stock No</td>
       <td style="width: 140px;">6</td>
       <td>Make</td>
       <td>HONDA</td>
       <td> Model</td>
       <td>ACTY</td>
       <td> COLOR </td>
       <td>BAIGE/GREEN</td>
       <td><img src="flags/~\flags\japan.png"></td>
    </tr>
       <tr class="makeborder">
       <td>Price </td>
       <td style="width: 140px;"> 0.0000</td>
       <td>Fuel</td>
      <td>DIESEL</td>
        <td class="coldata">Steering </td>
        <td>LEFT</td>
        <td style="background-color:red; color:white">Chassis No</td>
        <td class="Chassis_No"  style="background-color:red; color:white">135498698</td>
        <td></td>
  </tr>
  <tr class="makeborder">
        <td >Year</td>
        <td style="width: 140px;">2013 </td>
        <td>Mileage</td>
        <td>150</td>
        <td>Type</td>
        <td>TRUCK</td>
        <td>Door/Seat</td>
        <td>3/</td>
        <td></td>
   </tr>
</tbody></table> 

---

稍微不同的旋转，相似的想法

$("#search").on("keyup", function() {
    var value = $(this).val();
    $("table").each(function (index) {
        var chassisNo = $(this).find('.Chassis_No').text();

        if (value !== chassisNo) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
});

或者是一个非常有趣的方法，只需选择：p

if (value) {
   $('table .Chassis_No:not([text="' 
      + value + '"])').parents('table').hide();
   $('table .Chassis_No:contains("'
      + value + '")').parents('table').show();
} 
else {
  $('table').show() 
}

---

我希望您知道ID在DOM中应该是唯一的。请尝试用类替换ID。@palaѕѕѕѕѕp您是对的，我现在已经更新了它。。实际上，在listview中的asp.net应用程序中，它将使用相同的名称动态装箱多个id，但这并不重要，我会将其替换为类而不是id，但现在我已将id更新为类。根据一般经验法则，id应该是唯一的，而类可用于选择多个元素。但是，您可以使用容器元素来实现相同的结果。

$("#search").on("keyup", function() {
    var value = $(this).val();
    $("table").each(function (index) {
        var chassisNo = $(this).find('.Chassis_No').text();

        if (value !== chassisNo) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
});

if (value) {
   $('table .Chassis_No:not([text="' 
      + value + '"])').parents('table').hide();
   $('table .Chassis_No:contains("'
      + value + '")').parents('table').show();
} 
else {
  $('table').show() 
}