Question

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

为了简单起见，我创建了JSFiddle，其中有两个表，当我把机箱没有放在文本框中然后显示有匹配的机箱没有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();
    $(".style1 tr").each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var Chasis_no = $row.find("td .Chassis_No").text();

            if (Chasis_no.indexOf(value) !== 0) {
                $(".style1").hide();
            }
            else {
                 $(".style1").show();
            }
        }
    });
});

Answer 1

http://jsfiddle.net/rFGWZ/404/

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

                    $row = $(this);
                    if ($row.find('.Chassis_No').length > 0) {
                        var Chasis_no = $row.find("td.Chassis_No").text();

                        if (Chasis_no.indexOf(value) > -1) {
                            $(this).closest('.style1').show();
                        }
                        else {
                            $(this).closest('.style1').hide();
                        }
                    }
                }
            });
        });

Answer 2

略有不同的旋转，类似的想法。

$("#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() 
}

使用jQuery按ID搜索多个表

2 个答案: