Question

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

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，并隐藏其余部分。我怎么能这样做，它可以动态更新表格布局，所以我仍然得到整齐的列。

我正在使用的jquery是：

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

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

我有什么想法可以做到这一点。感谢

Answer 1

这就是你要找的东西：

<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>

{{1}}

在jQuery代码中，TD后面有箭头符号。这意味着，拥有数据端口attr的第一个孩子在 TD之后。在您的情况下，您的TD具有数据端口attr self。

Jquery Filtering Table对数据属性的结果

1 个答案: