当我按下复选框时，Javascript HTML表格移动

当我按下复选框表的元素不在内联中时。我只是隐藏类="盒子"。我需要编写特殊格式吗？默认情况下，它们是内联的，但是当我按下复选框时，它们正在移动。列状态不按顺序排列。N/A' 位置正在更改。

<html>
<head>


<script language="JavaScript">

function showMe(cls) {
var chboxs = document.getElementsByName("c1");
var vis ="none";
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
vis ="block";
break;
}
}
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
e.style.display = vis;
}
}
</script>

</head>


<br>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" onclick="showMe('box')">Show Result
</td>
</tr>
</table>

<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
</tr>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; ">Test </p></td>
<td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; ">Test </p></td>
<td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>
</tbody></table><table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px"align="left"><p style="margin: 0pt; ">Test </p></td>
<td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>

</tbody></table><table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p></td>
<td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p></td>
<td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>

</tbody></table></table>

</html>

如果我说得对; 问题是你使用的是 display：none，但显示的初始值是 ''，这个 chang 它应该可以工作。

<html>
<head>


<script language="JavaScript">

function showMe(cls) {
var chboxs = document.getElementsByName("c1");
var vis ="";
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
vis ="block";
break;
}
}
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
e.style.display = vis;
}
}
</script>

</head>


<br>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" onclick="showMe('box')">Show Result
</td>
</tr>
</table>

<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
</tr>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; ">Test </p></td>
<td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; ">Test </p></td>
<td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>
</tbody></table><table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px"align="left"><p style="margin: 0pt; ">Test </p></td>
<td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>

</tbody></table><table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p></td>
<td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p></td>
<td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>

</tbody></table></table>

</html>

编辑使用此代码，您可以在不使用显示的情况下"隐藏"N/A，您必须更改小册子我添加了一个类名hideEl

<html>
<head>


<script language="JavaScript">

function showMe(cls) {
var chboxs = document.getElementsByName("c1");
var vis =1;
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
vis =0;
break;
}
}
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
e.style.opacity = vis;
}
}
</script>

</head>


<br>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" onclick="showMe('hideEl')">Show Result
</td>
</tr>
</table>

<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
</tr>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; ">Test </p></td>
<td class="uniqueborder hideEl" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; ">Test </p></td>
<td class="uniqueborder hideEl" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>
</tbody></table><table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px"align="left"><p style="margin: 0pt; ">Test </p></td>
<td class="uniqueborder hideEl" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>

</tbody></table><table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p></td>
<td class="uniqueborder hideEl" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>
<tr>
<td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p></td>
<td class="uniqueborder hideEl" align="center" width="10%"><font color="gray">N/A</font></td>
</tr>

</tbody></table></table>

</html>

相关内容

最新更新

热门标签：