javascript中的可扩展框
我在对齐四个相邻的div盒时遇到了一些问题，或者更准确地说，我已经对齐了两个相邻的“head”盒，但我的问题是，我将它们用作展开折叠容器，这些盒将在第2行的其他可展开盒中造成损坏！因此，当您展开“头1”框时，“头4”框将向右浮动 我希望在展开框1或框2时，框“头4”和框“头3”向下移动，而不是左右浮动 伙计们也让我来跑，让他们更容易看到发生了什么 我很抱歉，下次我会在这里减少代码 箱子开着吗 只需尝试展开每个复选框和 问题会很清楚的 这是我的代码，我有问题作为参考：javascript中的可扩展框,javascript,html,css,listbox,expandable,Javascript,Html,Css,Listbox,Expandable,我在对齐四个相邻的div盒时遇到了一些问题，或者更准确地说，我已经对齐了两个相邻的“head”盒，但我的问题是，我将它们用作展开折叠容器，这些盒将在第2行的其他可展开盒中造成损坏！因此，当您展开“头1”框时，“头4”框将向右浮动 我希望在展开框1或框2时，框“头4”和框“头3”向下移动，而不是左右浮动 伙计们也让我来跑，让他们更容易看到发生了什么 我很抱歉，下次我会在这里减少代码 箱子开着吗 只需尝试展开每个复选框和 问题会很清楚的 这是我的代码，我有问题作为参考： <html&
<html>
<head>
<TITLE>Expandable and collapsible table - demo</TITLE>
<script type="text/javascript">
function toggle_visibility(tbid,lnkid)
{
var obj = document.getElementsByTagName("table");
for(i=0;i<obj.length;i++)
{
if(obj[i].id && obj[i].id != tbid)
{
document.getElementById(obj[i].id).style.display = "none";
x = obj[i].id.substring(3);
document.getElementById("lnk"+x).value = "[+] Expand";
}
}
if(document.all){document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";}
else{document.getElementById(tbid).style.display = `document.getElementById(tbid).style.display == "table" ? "none" : "table";}`
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
#tbl1,#tbl1 {display:none; text-transform: uppercase;}
#tbl2,#tbl2 {display:none; text-transform: uppercase;}
#tbl3,#tbl3 {display:none; text-transform: uppercase;}
#tbl4,#tbl4 {display:none; text-transform: uppercase;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>
<body>
<table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong> </font></td>
<td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div> </table>
</td>
</tr>
</table>
<table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong> </font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
<table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 3</strong> </font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl3">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
<table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 4</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk4" type="button" value="[+] Expand" onclick="toggle_visibility('tbl4','lnk4');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl4">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
</body>
</html>
可扩展和可折叠表格-演示
功能切换\u可见性（待定，lnkid）
{
var obj=document.getElementsByTagName（“表”）；
对于（i=0；i你应该看一看。这对你来说会简单得多。而且会使你的html更干净。另外，看一看，它会大大简化你使用JavaScript的生活。
另外，你应该把样式放在css样式表中，这样你的css会更丰富
否则，您可以通过以下步骤进行修复：
使用float:left
在div中将表两个接两个分组
使所有表格浮动：左
，然后调整页边距
在每个div的第一个和第二个表之间插入一个
和源代码：
<html>
<head>
<TITLE>Expandable and collapsible table - demo</TITLE>
<script type="text/javascript">
function toggle_visibility(tbid,lnkid)
{
var obj = document.getElementsByTagName("table");
for(i=0;i<obj.length;i++)
{
if(obj[i].id && obj[i].id != tbid)
{
document.getElementById(obj[i].id).style.display = "none";
x = obj[i].id.substring(3);
document.getElementById("lnk"+x).value = "[+] Expand";
}
}
if(document.all){document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";}
else{document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table";}
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
#tbl1,#tbl1 {display:none; text-transform: uppercase;}
#tbl2,#tbl2 {display:none; text-transform: uppercase;}
#tbl3,#tbl3 {display:none; text-transform: uppercase;}
#tbl4,#tbl4 {display:none; text-transform: uppercase;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>
<body>
<div style="float : left">
<table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong></font></td>
<td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div> </table>
</td>
</tr>
</table>
<div style="clear : both"></div>
<table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
</div>
<div style="float: left; margin-left:50px;">
<table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 3</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl3">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
<div style="clear: both"></div>
<table width="300px" border="0" style="float:left" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 4</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk4" type="button" value="[+] Expand" onclick="toggle_visibility('tbl4','lnk4');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl4">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
</div>
</body>
</html>
可扩展和可折叠表格-演示
功能切换\u可见性（待定，lnkid）
{
var obj=document.getElementsByTagName（“表”）；
对于（i=0；i请复制到JSFIDLE中，以便更容易阅读/查看实际发生的情况。此外，您没有使用jQuery。您使用的是普通的JavaScript.Tables.Yay！文档末尾的
标记有什么用？在您的位置创建一个JSFIDLE应该将代码量减少到所需的最小值。这样我们就更容易调试，并且请您解释。我们绝对不需要整张表。如果您能解释图像或JSFIDLE的问题，那会更好。您也在谈论div，但我看到的只是表。您能更精确一点吗？你们可能太苛刻了，请原谅，我去擦我的内联样式表。：）男士：非常感谢你，我会记住你的建议，现在就开始工作，热情的问候：）