如何使用 jQuery show/hide 特定 table 行

Question

我在 table 中显示一些数据，每一行我都有另一行，其中包含一些默认情况下隐藏的详细信息，我想让它仅在用户单击 [=23] 时可见=].

HTML 看起来像这样：

<div id="listing">
    <?php for(): ?>
        <tr>
            <td><a href="#" class="toggle">Toggle</a></td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr class="details" style="display: none">
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>   
    <?php endfor; ?>
</div>

我试过像这样使用 jQuery，但没有结果：

$('#listing').on('click', '.toggle', function(e) {
    e.preventDefault();
    $(this).closest('tr .details').toggle();
});

Answer 1

假设您修复了无效的 HTML 并包含 <table> 标签，您要使用：

$('#listing').on('click', '.toggle', function(e) {
    e.preventDefault();
    $(this).closest('tr').next('.details').toggle();
});

您需要使用.closest('tr')在DOM中从点击的按钮向上遍历到父行，然后.next('.details')移动到下一行元素。

Answer 2

在每个第一行元素上提供一个 data-target 这将是 class 的目标和 toggle show/hide。

所以基本上点击 toggle class 我们得到 data-target 使用该值找到我们的目标，然后简单地 toggle 目标。

JsFiddle : https://jsfiddle.net/63ujphmj/

Javascript

$(function()
{
    $('.toggle').on('click', function()
  {
    var target = $(this).data('target');
    $('.'+target).toggle();
  });
});

Html

<div id="listing">
  <table>
    <tr>
      <td><a href="#" class="toggle" data-target="details-1">Toggle 1</a></td>
      <td><a href="#" class="toggle" data-target="details-2">Toggle 2</a></td>
      <td><a href="#" class="toggle" data-target="details-3">Toggle 3</a></td>
      <td><a href="#" class="toggle" data-target="details-4">Toggle 4</a></td>
    </tr>
    <tr class="details">
      <td class="details-1" style="display: none">Toggle 1 details</td>
      <td class="details-2" style="display: none">Toggle 2 details</td>
      <td class="details-3" style="display: none">Toggle 3 details</td>
      <td class="details-4" style="display: none">Toggle 4 details</td>
    </tr>
  </table>
</div>

如何使用 jQuery show/hide 特定 table 行

How to show/hide specific table rows using jQuery

php

jquery

show-hide