以下是我的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>
答案 0 :(得分：1)
当然是。我推荐像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 );
}
} );
答案 1 :(得分：0)
在纯JavaScript中：
var clicktime = 1;
function expand(id) {
if(clicktime == 1) {
var tds = document.getElementsByTagName("td");
for(var i = 0; i < tds.length; i++) {
tds[i].style.display = "none";
}
document.getElementById(id).style.display = "table-cell";
document.getElementById(id).style.width = "100%"
document.getElementById(id).style.height = "100%"
clicktime = 2;
} else {
var tds = document.getElementsByTagName("td");
document.getElementById(id).style.width = "50%";
document.getElementById(id).style.height = "50%";
for(var i = 0; i < tds.length; i++) {
tds[i].style.display = "table-cell";
}
clicktime = 1;
}
}
HTML：
<tr>
<td id="1" onclick="expand(1)">
<div id="x1">PANEL 1</div>
</td>
<td id="2" onclick="expand(2)">
<div id="x2">PANEL 2</div>
</td>
</tr>
<tr>
<td id="3" onclick="expand(3)">
<div id="x3">PANEL 3</div>
</td>
<td id="4" onclick="expand(4)">
<div id="x4">PANEL 4</div>
</td>
</tr>
答案 2 :(得分：0)
我的JavaScript代码对每个步骤都有注释，以解释它是如何工作的。我还建议你在我的演示中将你的样式移动到css，而不是在html中使用它们内联。的 Live demo here (click).
虽然jQuery库可以提供帮助，但这里根本不需要它。 jQuery是一个巨大的脚本，会增加你的页面加载时间。我的剧本很轻松。没有图书馆的帮助，知道如何做事总是好的！
<强>标记：
<table id="myTable">
<tr>
<td>
<div>PANEL 1</div>
</td>
<td>
<div>PANEL 2</div>
</td>
</tr>
<tr>
<td>
<div>PANEL 3</div>
</td>
<td>
<div>PANEL 4</div>
</td>
</tr>
</table>
<强> JavaScript的：
//get references to the tds you need to manipulate
var tds = document.querySelectorAll('#myTable td');
//add a click function to each td
for (var i=0; i<tds.length; ++i) {
addClick(tds[i], i);
}
function addClick(elem, i) {
//"elem" is the td
//"i" is the td's number (0-3)
elem.addEventListener('click', function(e) {
toggle(elem, i);
});
}
function toggle(elem, i) {
//toggle other rows
var otherRows = getSiblings(elem.parentNode);
for (var h=0; h<otherRows.length; ++h) {
var row = otherRows[h];
//get row's current style
var rowDisplay = row.style.display;
//this flips the display style (shows if hidden, hides if shown)
row.style.display = (rowDisplay === '') ? 'none' : '';
}
//loop through each td on the current row and show or hide
var otherCells = getSiblings(elem);
for (var j=0; j<otherCells.length; ++j) {
var cell = otherCells[j];
var display = cell.style.display;
cell.style.display = (display === '') ? 'none' : '';
}
}
function getChildren(n, skipMe){
var r = [];
var elem = null;
for ( ; n; n = n.nextSibling )
if ( n.nodeType == 1 && n != skipMe)
r.push( n );
return r;
}
function getSiblings(n) {
return getChildren(n.parentNode.firstChild, n);
}