gpt4 book ai didi

javascript - 是否可以通过隐藏 HTML 表中的所有其他对象来仅显示单击的 ?

转载 作者:行者123 更新时间:2023-11-28 01:41:10 25 4
gpt4 key购买 nike

下面是我的 HTML 代码片段。当我单击任何 td 元素时,该元素应该通过隐藏所有同级 td 元素和 tr(其他行)元素来展开并显示在表 100% 区域中。当我第二次单击它时,初始表格应按原样显示。用Java脚本实现这个可行吗?预先感谢您提供任何解决方案。

 <html>
<head>
<title>Untitled</title>
</head>
<body onload="testHide()">
<table style="width:100%;height:100%" summary="">
<tr>
<td>
<div id="x1">PANEL 1</div>
</td>
<td>
<div id="x2">PANEL 2</div>
</td>
</tr>
<tr>
<td>
<div id="x3">PANEL 3</div>
</td>
<td>
<div id="x4">PANEL 4</div>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
function testHide() {
alert("I am in");
}
</script>
</html>

最佳答案

当然是这样。我推荐像 jQuery 这样的 DOM 库.

在此示例中,我们处理与 on 的核心 DOM 交互检测点击的方法,以及 show/hide用于在其他表格单元格上切换 display: none 内联 CSS 的简写。

要查找其他表格单元格,我们使用 closest , find ,和 not DOM traversal方法。

最后,为了跟踪状态(以确定单击是否应该展开或折叠),我们使用 data方法。

// Whenever a table cell is clicked...
$( 'td' ).on( 'click', function toggle(){
// ...save a reference to it
var $td = $( this );
// and to the other cells in the same table:
var $others = $td
// Go up the DOM tree and find the closest table
.closest( 'table' )
// Find all table cells within it
.find( 'td' )
// Exclude the current table cell
.not( $td );

// Check to see if we've already expanded it
// (this will be false the first time round)
if( $td.data( 'expanded' ) === true ){
// If it is, reveal the others
$others.show();
// And save state
$td.data( 'expanded', false );
}
else {
// Otherwise, hide the others
$others.hide();
// And save state
$td.data( 'expanded', true );
}
} );

关于javascript - 是否可以通过隐藏 HTML 表中的所有其他对象来仅显示单击的 <td> ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20909724/

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