Jquery 根据数据属性筛选 Table 结果

Question

我有一个简单的 table 可以在列中显示日期。每个 <td> 都有一个数据属性 data-port 我想根据从下拉列表中选择的选项过滤 table 中显示的结果。

HTML 是：

<select id='filter'>
<option></option>
<option value='fd18'>OPTION A</option>
<option value='af13'>OPTION B</option>
</select>

<table id='table1'>
<tbody>
<tr>
    <td data-port="fd18"><div id="123" class="title">123</div></td>
    <td data-port="af13"><div id="456" class="title">456</div></td>
    <td data-port="0000"><div id="789" class="title">789</div></td>
    <td data-port="fd18"><div id="213" class="title">213</div></td>
</tr>

<tr>
    <td data-port="fd18"><div id="345" class="title">345</div></td>
    <td data-port="af13"><div id="946" class="title">946</div></td>
    <td data-port="0000"><div id="368" class="title">368</div></td>
    <td data-port="af13"><div id="246" class="title">246</div></td>
</tr>

<tr>
    <td data-port="af13"><div id="642" class="title">642</div></td>
    <td data-port="fd18"><div id="759" class="title">795</div></td>
    <td data-port="fd18"><div id="335" class="title">335</div></td>
    <td data-port="fd18"><div id="556" class="title">556</div></td>
</tr>
</tbody>
</table>

使用 jquery 我试图显示数据端口等于所选选项的 td，并隐藏其余部分。我该怎么做，是否可以动态更新 table 布局，这样我仍然可以得到整齐的列。

我使用的jquery是：

$('#filter').change(function() {
    var port = $(this).val()
    console.log( port )
    $("td > [data-port!=" + port+ "]").hide();
    $("td > [data-port=" + port+ "]").show();
});

控制台显示返回了正确的值，但我最终隐藏了页面上的所有 TD，而不仅仅是那些不匹配的

关于如何做到这一点的任何想法。谢谢

Answer 1

这是您要找的吗：

$('#filter').change(function() {
    var port = $(this).val()
    console.log( port )
    if ( port !== '' ) {
      $("td[data-port!=" + port+ "]").css('visibility', 'hidden');
      $("td[data-port=" + port+ "]").css('visibility', 'visible');
    } else {
      $("td").css('visibility', 'visible');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='filter'>
<option value=''></option>
<option value='fd18'>OPTION A</option>
<option value='af13'>OPTION B</option>
</select>

<table id='table1'>
<tbody>
<tr>
    <td data-port="fd18"><div id="123" class="title">123</div></td>
    <td data-port="af13"><div id="456" class="title">456</div></td>
    <td data-port="0000"><div id="789" class="title">789</div></td>
    <td data-port="fd18"><div id="213" class="title">213</div></td>
</tr>

<tr>
    <td data-port="fd18"><div id="345" class="title">345</div></td>
    <td data-port="af13"><div id="946" class="title">946</div></td>
    <td data-port="0000"><div id="368" class="title">368</div></td>
    <td data-port="af13"><div id="246" class="title">246</div></td>
</tr>

<tr>
    <td data-port="af13"><div id="642" class="title">642</div></td>
    <td data-port="fd18"><div id="759" class="title">795</div></td>
    <td data-port="fd18"><div id="335" class="title">335</div></td>
    <td data-port="fd18"><div id="556" class="title">556</div></td>
</tr>
</tbody>
</table>

您的 jQuery 代码中的 TD 后面有箭头符号。这意味着，首先 child 在具有 data-port 属性的 TD 之后。在您的情况下，您的 TD 具有 data-port attr self.

Jquery 根据数据属性筛选 Table 结果

Jquery Filtering Table results on data attribute

jquery

filter

custom-data-attribute