JQuery展开和隐藏表td

JQuery Expand and hide table td

本文关键字：td 隐藏 JQuery      更新时间：2023-09-26

我设法使表行展开和隐藏，但当我添加另一行时，就像所有行都折叠在一起一样。

非常感谢你的帮助。

JS-

$('#more').on('click',function(event){
  $(this).closest('tr').nextAll('.hidden-row').toggle();
});

这是演示

您使用的是nexAll()，它会选择旁边的所有.hidden-row同级，若要获得下一个同级，请使用next()。同样，您对td使用相同的id，它应该是唯一的，所以只选择第一个元素。对于元素组，始终使用class。

$('.more').on('click', function(event) {
  $(this).closest('tr').next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a class="more" href="#">section</a>
    </td>
  </tr>
  <tr class="hidden-row">
    <td colspan="10">Hahaha</td>
  </tr>
  <tr>
    <td><a class="more" href="#">more</a>
    </td>
  </tr>
  <tr class="hidden-row">
    <td colspan="10">Hahaha</td>
  </tr>
</table>

不要使用nextAll()，只使用next()。

此外，HTML文档中不应该有重复的id，所以用类替换所有more id。

请参阅JSFiddle了解更新后的代码应该是什么样子。

JSFiddle

相关文章：