gpt4 book ai didi

javascript - 在不更改表格布局的情况下使用javascript隐藏部分表格

转载 作者:太空宇宙 更新时间:2023-11-03 23:53:50 25 4
gpt4 key购买 nike

编辑:好吧,我把脚本标签中的所有内容都放在

$(document).ready(function) {

所以现在 eventTd 确实隐藏了。

我有一个表,代码在下面

<table>
<tr>
<td>itemOne</td>
<td class="evenTd">itemTwo</td>
</tr>
</table>

现在,我想要它,以便在开始时,第一个 td 是唯一可见的 td(eventTd 中的任何内容都不应该是可见的)。在那之后,我想要它,以便当您单击第一个 td (itemOne) 时,itemTwo 会滑动并出现。到目前为止我已经

$(document).ready(function() {
$('.evenTd').hide();
});

它隐藏了 eventTd,但是,现在没有 eventTd 类的 td 占据了整个屏幕。我该怎么做才能使布局不发生变化?

最佳答案

如果这是您的全部代码,并且它出现在相关元素之前(无论是在head 还是body 元素中,问题是脚本在 DOM 节点存在之前运行。

因此,您可以或者将它放在$(document).ready()中:

<script> 
$(document).ready(function(){
$('.evenTd').hide();
});
</script>

或者将脚本放在 HTML 中您要对其执行操作的元素之后

<body>
<table>
<tr>
<td>itemOne</td>
<td class="evenTd">itemTwo</td>
</tr>
</table>
<script>
$('.evenTd').hide();
</script>
</body>

不过请记住,添加和删除单个表格单元格可能会导致布局问题,最好隐藏相关 td 的后代元素,而不是 td 本身。

例如,给定当前的 HTML:

<table>
<tr>
<td>itemOne</td>
<td class="evenTd"><div>itemTwo</div></td>
</tr>
</table>

和:

$(document).ready(function(){   
$('.evenTd').hide();
});

这给出:demo ,导致单个可见的 td 占据整个行空间。

将上述 HTML 与以下 jQuery 结合使用:

$(document).ready(function(){   
$('.evenTd div').hide();
});

这给出:demo ,它仍然演示了布局更改(因为 td 内部没有要显示的可视内容),但 td 仍然可见(因此这是一个稍微小的更改)。

下面的 jQuery 简单地使 td 的内容“隐藏”(因此它在页面上不可见,但仍然“存在”,占用文档流中的空间):

$(document).ready(function(){   
$('.evenTd div').css('visibility','hidden');
});

这给出:demo .

但是,如果要在某个时候恢复这种可见性,我更愿意在 td 本身上添加或删除一个类,并使用 CSS 来解决每个州:

$(document).ready(function(){   
$('.evenTd').addClass('hidden');
$('tr').on('click', 'td.evenTd', function(){
$(this).toggleClass('hidden');
});
});

JS Fiddle demo .

关于javascript - 在不更改表格布局的情况下使用javascript隐藏部分表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19230638/

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