gpt4 book ai didi

javascript - 默认折叠 HTML 表格行

转载 作者:行者123 更新时间:2023-11-27 22:56:48 25 4
gpt4 key购买 nike

我正在使用来自 this 的轻微修改回答使标题行在 HTML 表格中可折叠。

我想修改 JS 代码段,以便在默认情况下折叠而不是展开行(在页面加载/文档准备就绪时)。我该怎么做?

基本上我想要实现的是:

$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){

除了在单击和切换标题行时之外,在页面加载/刷新时运行一次。

我知道我需要更改两个标签 <span>+</span>在 HTML 中,但我坚持如何在页面加载时触发此行为。


Javascript:

$(document).ready(function(){
$('tr.header').click(function(){
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){
});
});
});

HTML:

<table border="0">
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</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>

CSS:

table, tr, td, th
{
border: 1px solid black;
border-collapse:collapse;
}
tr.header
{
cursor:pointer;
}

JSFiddle:https://jsfiddle.net/mkb39x0u/

最佳答案

似乎您只是在 document.ready 中执行此操作:

$('tr:not(.header)').hide();

Demo

此外,我可能会使用行上的类和 CSS 来切换加号和减号字符的可见性,而不是用它来弄乱您的脚本。

关于javascript - 默认折叠 HTML 表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55418928/

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