gpt4 book ai didi

javascript - 元素被填充到表格的第一列

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

我正在尝试根据选中的复选框来隐藏/显示表格行。

这是http://dbdev2.pharmacy.arizona.edu/wideproblem.html

如何让隐藏行正确显示在表格宽度处?我什至尝试将它设置为该行的 css 属性,但它不起作用。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Case of the Squished Row</title>
<style>
table {
border: 1px solid black;
width: 600px;
}
tr {border:1px solid black;}
tr.anote {width:600px;}
th {
border:1px solid black;
width:50%;
}
td {
border: 1px solid black;
width: 25%;
}

</style>

<script type="text/javascript">
function ShowRow(msg){
var thecheck = document.getElementById("showcheck");
var thebox= document.getElementById("showbox");
var thenote= document.getElementById("shownote");
if (thecheck.checked){
thebox.innerHTML=msg;
thebox.style.color='red';
thenote.style.display='block';
}
else {
thebox.innerHTML='This is a checkbox';
thebox.style.color='black';
thenote.style.display='none';
}

}
</script>
</head>
<body>
<h1>The Case of the Squished Row</h1>
<br><br>
<h2> using display:none CSS property</h2>
<table>
<tbody id="topline">
<tr><th id="showbox">This is a checkbox</th>
<td><input type="checkbox" id="showcheck" onclick="ShowRow('Note is DISPLAY:BLOCK')"></td>
<td>this is filler</td></tr>
</tbody>
<tbody id="shownote" style="display:none">
<tr class="anote"><th>This is a note</th><td>Hey! The box is checked!</td><td>this is filler</td></tr>
</tbody>
<tbody id="botline">
<tr><th>Big Filler</th><td>Little filler</td><td>this is filler</td></tr>
</tbody>
</table>
</body>
</html>

最佳答案

在显示表格行组 (<tbody>) 时,您必须使用“table-row-group”而不是“block”作为“display”属性的值。

关于javascript - <tbody> 元素被填充到表格的第一列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19712647/

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