属于某个类的表格单元格的 HTML 范围

我有一个小例子，我想根据用户的选择隐藏/显示单选按钮。但是，由于某种原因，colspan 属性无法正常工作。

style.
.hide {
display: none;
font-size: 13px;
font-weight: bold;
}
body
table(align='center', 8px='', cellpadding="10", border=1)
tr
th
input(type='radio', name='tab', value='red', onclick='red();')
| Red
th
input(type='radio', name='tab', value='blue', onclick='blue();')
| Blue
tr
td#color.hide(colspan='2')
input(type='radio', value='light', name='one')
| light red
input(type='radio', value='dark', name='two')
| dark red
tr
td(colspan='2')
p test
script.
function red() {
document.getElementById('color').style.display = 'block';
}
function blue() {
document.getElementById('color').style.display = 'none';
}

我想要的是让浅红色和深红色的弹出选择跨越两列，就像表中的最后一个测试条目一样。我得到了与html相同的示例

<!DOCTYPE html>
<html>
<head>
<style>
.hide {
display: none;
font-size: 13px;
font-weight: bold;
}
</style>
</head>
<body>
<table align="center" 8px="" cellpadding="10" border="1">
<tr>
<th>
<input type="radio" name="tab" value="red" onclick="red();">Red
</th>
<th>
<input type="radio" name="tab" value="blue" onclick="blue();">Blue
</th>
<tr>
<td id="color" colspan="2" class="hide">
<input type="radio" value="light" name="one">light red
<input type="radio" value="dark" name="two">dark red
</td>
</tr>
<tr>
<td colspan="2">
<p>test</p>
</td>
</tr>
</table>
</body>
<script>
function red() {
document.getElementById('color').style.display = 'block';
}
function blue() {
document.getElementById('color').style.display = 'none';
}
</script>
</html>

你很接近，你只需要将javascript代码更改为

document.getElementById('color').style.display = 'table-cell'

这将使<td>显示为表格单元格，而不是

document.getElementById('color').style.display = 'block';

尝试将<td>显示为任何其他 HTML 标记这解决了您的问题。

正如另一个答案建议使用table-row如果您使用<tr>显示/隐藏，它将准确工作，在这种情况下，您使用的是<td>这是一个单元格，因此table-cell属性是合适的。

与具有不同显示属性<table>相关的标记，您可以从此处获取有关显示属性的通知。

function red() {
document.getElementById('color').style.display = 'table-cell';
}
function blue() {
document.getElementById('color').style.display = 'none';
}

.hide {
display: none;
font-size: 13px;
font-weight: bold;
}

<table align="center" 8px="" cellpadding="10" border="1">
<tr>
<th>
<input type="radio" name="tab" value="red" onclick="red();">Red
</th>
<th>
<input type="radio" name="tab" value="blue" onclick="blue();">Blue
</th>
</tr>
<tr>
<td colspan="2" id="color" class="hide">
<span><input type="radio" value="light" name="one">light red</span>
<span><input type="radio" value="dark" name="two">dark red</span>
</td>
</tr>
<tr>
<td colspan="2">
<p>test</p>
</td>
</tr>
</table>

看看这个： https://bugzilla.mozilla.org/show_bug.cgi?id=112113

通常 tr 具有显示：table-row;。显然，布局没有保持相同，如果你让它显示：块;。(如果它在IE中"工作"，IE 是错误的。

标记无效。

所以，通常它有表行，如果你改变它将被阻止。这使得表无法控制。

<!DOCTYPE html>
<html>
<head>
<style>
.hide {
display: none;
font-size: 13px;
font-weight: bold;
}
</style>
</head>
<body>
<table align="center" 8px="" cellpadding="10" border="1">
<tr>
<th>
<input type="radio" name="tab" value="red" onclick="red();">Red
</th>
<th>
<input type="radio" name="tab" value="blue" onclick="blue();">Blue
</th>
<tr>
<td id="color" colspan="2" class="hide">
<input type="radio" value="light" name="one">light red
<input type="radio" value="dark" name="two">dark red
</td>
</tr>
<tr>
<td colspan="2">
<p>test</p>
</td>
</tr>
</table>
</body>
<script>
function red() {
document.getElementById('color').style.display = 'table-row';
}
function blue() {
document.getElementById('color').style.display = 'none';
}
</script>
</html>

相关内容

最新更新

热门标签：