我已經有一個table展開和折疊功能，但我想添加 和-按鈕以使功能更加動態。任何人都可以幫助我嗎？
$('tr.header').click(function() {
$(this).nextUntil('tr.header').css('display', function(i, v) {
return this.style.display === 'table-row' ? 'none' : 'table-row';
});
});tr {
display: none;
}
tr.header {
display: table-row;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0">
<tr class="header">
<td colspan="2">Header</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<td colspan="2">Header</td>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>http://jsfiddle.net/5cdh4L23/
uj5u.com熱心網友回復：
要執行您需要的操作，您可以span向.header單元格添加一個元素以包含 or -。當點擊發生時，您可以根據字符的當前值交換字符。
另請注意，您可以使用 CSS 類來顯示tr元素，這使 JS 更簡潔，因為您可以使用toggleClass()而不是三元 in css().
$('tr.header').click(function() {
$(this)
.find('span').text((i, t) => t === ' ' ? '-' : ' ').end()
.nextUntil('tr.header').toggleClass('show');
});tr { display: none; }
tr.show { display: table-row; }
tr.header { display: table-row; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table border="0">
<tr class="header">
<td colspan="2">Header <span> </span></td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<td colspan="2">Header <span> </span></td>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/406160.html
標籤：
下一篇：添加基于值的類（jquery）