Question

我试图根据复选框隐藏/显示表格行。

这是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>

Answer 1

显示表行组（<tbody>）时，必须使用“table-row-group”，而不是“block”作为“display”属性的值。

元素填充到表的第一列

1 个答案: