显示表格中的行，其中包含来自输​​入的字符串名称属性（JQuery）

Question

我希望有一个keyup函数，它只显示跨越多行的单元格与输入文本匹配的行。 请考虑以下表格：

  <table border='1'>
    <tr>
        <td rowspan='2'>Key1</td>
        <td name='Key1'> dummy1 </td>
    </tr>
     <tr>
        <td name='Key1'> dummy2 </td>
     </tr>
     <tr>
        <td rowspan='2'>Key2</td>
        <td name='Key2'> dummy3 </td>
    </tr>
     <tr>
        <td name='Key2'> dummy4 </td>
     </tr>
</table>

jsfiddle

此处每行都有第二个td标记，其名称与其“父”列文本相匹配。所以当我在输入字段输入'Key1'时，我希望它只显示dummy1和dummy2。在jquery中有可能吗？

Answer 1

我了解您要显示匹配name的行。如果这是错误的，请详细说明，然后我可以更新它。

以下是演示：https://jsfiddle.net/erkaner/gugy7r1o/33/

$('input').keyup(function(){
   $('tr').hide();
   $("td").filter(function() {
      return $(this).text().toLowerCase().indexOf(keyword) != -1; }).parent().show().next().show();
   });
});

Answer 2

这是我对您的问题的看法，假设您始终希望显示第一列。 https://jsfiddle.net/gugy7r1o/2/

<input type="text" id="myInput" />

<table border='1'>
    <tr>
        <td rowspan='2'>Key1</td>
        <td name='Key1' class="data"> dummy1 </td>
    </tr>
     <tr>
        <td name='Key1' class="data"> dummy2 </td>
     </tr>
     <tr>
        <td rowspan='2'>Key2</td>
        <td name='Key2' class="data"> dummy3 </td>
    </tr>
     <tr>
        <td name='Key2' class="data"> dummy4 </td>
     </tr>
</table>

.data{
    display:none;
}

var theData = $('td.data');

var input = $('#myInput').on('keyup', function(){
    theData.hide();
    var value = input.val();

    var matches = theData.filter('[name="'+value+'"]');
    matches.show();
});

Answer 3

首先，我建议使用<ul>来包装每个键，因为表格应该用于数据结构（请原谅我，如果这是用于它）。

其次，只需将keyup事件附加到搜索框，然后根据ID查找匹配项。见下面的例子：

JS Fiddle Demo

还值得一提的是，如果您最终拥有大量行，那么将timeout附加到keyup事件可能很有用，这样只会为快速打字机触发一个过滤器！