Javascript 在IE中折叠tr时表格中不需要的行_Javascript_Html_Css_Internet Explorer_Doctype

Javascript 在IE中折叠tr时表格中不需要的行

javascript html css internet-explorer

Javascript 在IE中折叠tr时表格中不需要的行,javascript,html,css,internet-explorer,doctype,Javascript,Html,Css,Internet Explorer,Doctype,我有一个表，其中expand/collapse javascript作用于分配给tr的类值。请参阅下面的html代码。这一切在Chrome中都很好，但在IE中，当我展开然后折叠www行时，在xxx和zzz行中会出现额外的不需要的行。线条看起来像是边框（请参见css td边框样式定义）。看起来折叠行和隐藏行的边框仍然显示（非按钮行比按钮行略低一些，显然是因为标准的按钮填充和边框宽度）这是为什么？我如何防止这种情况发生 <html> <head> &

我有一个表，其中expand/collapse javascript作用于分配给tr的类值。请参阅下面的html代码。这一切在Chrome中都很好，但在IE中，当我展开然后折叠www行时，在xxx和zzz行中会出现额外的不需要的行。线条看起来像是边框（请参见css td边框样式定义）。看起来折叠行和隐藏行的边框仍然显示（非按钮行比按钮行略低一些，显然是因为标准的按钮填充和边框宽度）

这是为什么？我如何防止这种情况发生

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Example</title>
      <style type="text/css">
body, p {
    background-color: white;
    font-family: Verdana;
    font-size: 10pt;
    font-style: normal;
    color: black;
    margin-bottom: 4.5pt;
    margin-top: 0pt;
}

table {
    border: solid black 1pt;
    border-collapse: collapse;
    padding: 0;
    border-spacing: 0;
}

th {
    background: rgb(255, 255, 153);
    border-style: solid;
    border-color: black;
    border-width: 1pt;
    padding: 0cm 5pt;
    color: black;
    font-family: Verdana;
        font-size: 10pt;
    font-style: normal;
    vertical-align: top;
}
td {
    border-style: dotted dotted none none;
    border-color: black;
    border-width: 1pt;
    padding: 0cm 5pt;
    color: black;
    font-style: normal;
    font-family: Verdana;
        font-size: 10pt;
    vertical-align: top;
    margin-bottom: 4.5pt;
    margin-top: 0pt;
}

input.buttonSeq {
    color: blue;
    background: ffffcc;
    border: none;
    margin-left:0pt;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 100%;
}

</style>
      <script type="text/javascript" language="javascript">
//expand and collapse tr functions based on class
function ToggleTRbyClass(clss){
    var trs = document.getElementsByTagName('tr');
    for (var i=0; i!=trs.length; i++) {
        if (trs[i].className == clss) {
            if (    trs[i].style.display == "none")
                {
                trs[i].style.display = "table-row"
                }
            else    {
                trs[i].style.display = "none"
                }
        }
    }
    return true;
}
</script>
      </head>
   <body>
      <br><br>
      <table style="table-layout:fixed word-break:break-all">
         <col width="120">
         <thead>
            <tr>
               <th>Element</th>
            </tr>
         </thead>
         <tbody>
            <tr bgcolor="ffffcc">
               <td align="left" style="font-style:italic; font-weight: bold">
                  <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('www'); return true;" onMouseOver="this.style.cursor='hand'" value="www"></div>
               </td>
            </tr>
            <tr style="display:none" class="www">
               <td>element1</td>
            </tr>
            <tr style="display:none" class="www">
               <td>element2</td>
            </tr>
            <tr style="display:none" class="www">
               <td>element3</td>
            </tr>
            <tr bgcolor="ffffcc">
               <td align="left" style="font-style:italic; font-weight: bold">
                  <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('xxx'); return true;" onMouseOver="this.style.cursor='hand'" value="xxx"></div>
               </td>
            </tr>
            <tr style="display:none" class="xxx">
               <td>element4</td>
            </tr>
            <tr bgcolor="ffffcc">
               <td align="left" style="font-style:italic; font-weight: bold">
                  <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('zzz'); return true;" onMouseOver="this.style.cursor='hand'" value="zzz"></div>
               </td>
            </tr>
            <tr style="display:none" class="zzz">
               <td>element5</td>
            </tr>
         </tbody>
      </table><br></body>
</html>


例子
身体，p{
背景色：白色；
字体系列：Verdana；
字号：10pt；
字体风格：普通；
颜色：黑色；
利润底部：4.5吨；
页边距顶部：0pt；
}
桌子{
边框：纯黑1pt；
边界塌陷：塌陷；
填充：0；
边界间距：0；
}
th{
背景：rgb（255、255、153）；
边框样式：实心；
边框颜色：黑色；
边框宽度：1pt；
填料：0厘米5吨；
颜色：黑色；
字体系列：Verdana；
字号：10pt；
字体风格：普通；
垂直对齐：顶部；
}
运输署{
边框样式：虚线无；
边框颜色：黑色；
边框宽度：1pt；
填料：0厘米5吨；
颜色：黑色；
字体风格：普通；
字体系列：Verdana；
字号：10pt；
垂直对齐：顶部；
利润底部：4.5吨；
页边距顶部：0pt；
}
input.buttonSeq{
颜色：蓝色；
背景：FFCC；
边界：无；
左边距：0pt；
边际上限：0px；
边缘底部：0px；
字体大小：100%；
}
//基于类展开和折叠tr函数
功能切换TrByClass（clss）{
var trs=document.getElementsByTagName（'tr'）；
for（var i=0；i！=trs.length；i++）{
if（trs[i].className==clss）{
if（trs[i].style.display==“无”）
{
trs[i].style.display=“表格行”
}
否则{
trs[i].style.display=“无”
}
}
}
返回true；
}



元素
要素1
元素2
元素3
元素4
元素5

您需要指定a作为标记的第一行。如果没有

doctype

，IE将在中渲染，这基本上就是IE 5.5渲染引擎。怪癖模式极大地影响了box模型和Javascript支持等

例如：

<!doctype html>

与其将显示设置为“表行”，不如将其设置为“表行”，以便恢复默认行为。旧版本的IE不支持

表行

，而需要

块

如果CSS覆盖了默认值（即，如果使用它从一开始就隐藏一类行），请尝试：

然后添加一个DOCTYPE，就像wsanville说的那样。

这里有一个给你的文档。我在Win7上的IE9中没有看到任何奇怪的东西。有趣的是，IE6也可以正常工作。使用display:block，因为它不是表行的风扇。您使用的是哪个IE版本？Compat还是“标准”模式？我使用IE9.0.8112.16421更新版本9.0.4（从IEAbout屏幕上获取）。很有趣-这很好地解决了奇怪的行为。不过它确实改变了按钮的格式（引入了浅蓝色背景），因此必须在那里做额外的事情。但我不太明白这一点——怪癖模式到底是什么？我将尝试你的链接到该主题，并在这里赶上我的知识！请参见编辑。有灰色背景的原因是因为有一个格式错误的CSS规则（它显然是在标准模式下应用的，而不是在怪癖模式下应用的）。去表明，有些东西似乎一直在正常工作，但仍然有它的错误-thx！

input.buttonSeq {
    color: blue;
    background: ffffcc; /* change this to #ffffcc */
    border: none;
    margin-left:0pt;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 100%;
}

try {tr.style.display = "table-row";}
catch(e) {tr.style.display = "block";}