gpt4 book ai didi

jquery - 隐藏所有下一个 tr td 直到下一个 tr th

转载 作者:行者123 更新时间:2023-12-01 04:20:09 24 4
gpt4 key购买 nike

它应该很简单,但是这个 jQuery 函数占用了太多元素,我认为它甚至隐藏了 jQuery。

我想做的是,当一个人点击tr th时,所有下一个tr td应该隐藏,直到下一个tr th>.

我怎样才能让这段代码工作?

    <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
th { background:#dad;
font-weight:bold;
font-size:16px;
width: 50%;
}
td { background:red;
font-weight:bold;
font-size:16px;
width: 50%;
}
</style>
</head>
<body>
<table id="example">
<tr>
<th>
<button>Show it 3</button>
</th>
</tr>
<tr>
<td>test 1</td>
</tr>
<tr>
<td>test 2</td>
</tr>
<tr>
<th>
<button>Show it 2</button>
</th>
</tr>
<tr>
<td>test 3</td>
</tr>
<tr>
<td>test 4</td>
</tr>
</table>

<script>
$('#example tr th').click( function() {
//alert($(this).parent().html())
$(this).parent().nextUntil('tr th').toggle();
})
</script>
</body>
</html>

最佳答案

您可以向具有第 th 元素的 tr 元素添加一个类:

<table id="example">
<tr>
<th class='toggle'>
<button>Show it 3</button>
</th>
</tr>
<tr>
<td>test 1</td>
</tr>
<tr>
<td>test 2</td>
</tr>
<tr class='toggle'>
<th>
<button>Show it 2</button>
</th>
</tr>
<tr>
<td>test 3</td>
</tr>
<tr>
<td>test 4</td>
</tr>
</table>

$('#example tr th').click( function() {
$(this).parent().nextUntil('.toggle').toggle();
})

DEMO

关于jquery - 隐藏所有下一个 tr td 直到下一个 tr th,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11414965/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com