jQuery 展开表未作为隐藏启动

jquery expand table not starting as hidden

本文关键字：隐藏 启动 jQuery      更新时间：2023-09-26

我正在尝试制作一个可扩展的表格，其中许多行都有一个按钮，您可以按下该按钮为每行切换子行。这似乎正在起作用，但我希望它从关闭子行开始。我该怎么做？

$(document).ready(function() {
  $('.RowToClick').click(function() {
    $(this).nextAll('tr').each(function() {
      if ($(this).is('.RowToClick')) {
        return false;
      }
      $(this).toggle();
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<table border=0>
  <tr class="RowToClick">
    <td><button>+</button></td>
    <td>hello</td>
  </tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>
<table border=0>
  <tr class="RowToClick"><button>+</button></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>
<table border=0>
  <tr class="RowToClick"><button>+</button></tr>
  <tr><td>Data Row 1 Goes Here...</td></tr>
  <tr><td>Data Row 2 Goes Here...</td></tr>
  <tr><td>Data Row 3 Goes Here...</td></tr>
  <tr><td>Data Row 4 Goes Here...</td></tr>
  <tr><td>Data Row 5 Goes Here...</td></tr>
</table>

只需在 jquery 中添加一行

$('.RowToClick').nextAll('tr').toggle();

并将行名放在同一个TD喜欢按钮中

<td><button>+</button> Row 1</td>

所以它看起来像

$(document).ready(function() {
  $('.RowToClick').nextAll('tr').toggle();
  $('.RowToClick').click(function() {
    $(this).nextAll('tr').each(function() {
      if ($(this).is('.RowToClick')) {
        return false;
      }
      $(this).toggle();
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<table border=0>
  <tr class="RowToClick"><td><button>+</button> Row 1</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>
<table border=0>
  <tr class="RowToClick"><td><button>+</button> Row 2</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>
<table border=0>
  <tr class="RowToClick"><td><button>+</button> Row 3</td></tr>
  <tr><td>Data Row 1 Goes Here...</td></tr>
  <tr><td>Data Row 2 Goes Here...</td></tr>
  <tr><td>Data Row 3 Goes Here...</td></tr>
  <tr><td>Data Row 4 Goes Here...</td></tr>
  <tr><td>Data Row 5 Goes Here...</td></tr>
</table>

在 tr 中添加 td

<tr class="RowToClick">
    <td>
        <button>+</button>
    </td>
    <td>hello</td>
</tr>

演示

.CSS

.RowToClick ~ tr{
    display :none;
}
相关文章：