我是Javascript和CSS的新手,我尝试使用JavaScript展开/折叠表行。
而且,我使用 CSS 来更改表格的样式。
这是我的代码片段:
<html>
<head>
<script>
function ShowSubTable(titleRow)
{
var nextRow = titleRow.nextSibling;
while (nextRow != null)
{
if( nextRow.tagName != 'TR' ){
nextRow = nextRow.nextSibling;
continue;
}
if (nextRow.style.display == 'none')
{
nextRow.style.display = 'block';
}
else
{
nextRow.style.display = 'none';
}
break;
}
}
</script>
<style>
table.tlb
{
width: 100%;
}
table.tlb th
{
background: #E8C993;
font-size: 22px;
}
table.tlb td
{
background: #FFEAAF;
font-size: 16px;
}
</style>
</head>
<body>
<table class="tlb">
<tr onclick="ShowSubTable(this)">
<th>abc</th>
</tr>
<tr>
<td>123</td>
</tr>
<tr onclick="ShowSubTable(this)">
<th>def</th>
</tr>
<tr>
<td>456</td>
</tr>
</table>
</body>
</html>
展开/折叠功能工作正常。但是有一个问题。
我的桌子的宽度在开始时是 100%。但是,在我折叠表格行并将其展开之后。表格行的宽度不是 100%。
如何解决问题?
提前谢谢。
您应该
在显示tr
元素时恢复默认显示值
nextRow.style.display = 'table-row';
而不是
nextRow.style.display = 'block';