Fatal编程技术网

Javascript 内联HTML IE 8

javascript html

Javascript 内联HTML IE 8,javascript,html,Javascript,Html,我是一个JavascriptNoobie—正在努力解决一些跨平台问题：-） 附加的代码在Firefox/Safari等中运行良好，但在IE8中当然不行 这应该是一个简单的披露。show/hide div工作正常，只是文本不会更改以显示新状态 我知道这是innerHTML的一个问题-但我不知道如何修复它 请帮忙。。。从昨天起我就一直在用头撞这堵墙 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww

我是一个JavascriptNoobie—正在努力解决一些跨平台问题：-） 附加的代码在Firefox/Safari等中运行良好，但在IE8中当然不行

这应该是一个简单的披露。show/hide div工作正常，只是文本不会更改以显示新状态

我知道这是innerHTML的一个问题-但我不知道如何修复它

请帮忙。。。从昨天起我就一直在用头撞这堵墙

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <style type="text/css">
            body { border: 0px; }
            *{ font: 11px \Lucida Grande\, Verdana, sans-serif; }
            table { width:100% ; border: 0px ; border-spacing: 0px ; table-layout: fixed ; }
            td { border: 0px }
            .values { vertical-align:text-top }
            .labelGreen { font-weight:bold ; color: #008000 ; } 
            td.auto { width:auto; } 
            .empty { margin:auto }
            ul { list-style: none; margin: 0; padding: 0;} 
            a { color: #888; text-decoration: none; font-weight: bold; font-size: 10px; }
        </style>
        <script type="text/javascript">
            function toggle_visibility1(id)
            {
                var e = document.getElementById(id);
                if (e.style.display == "none")
                {
                    e.style.display = "block";
                    document.getElementById("triOpen1").innerHTML = "<a href="javascript:openTri()">Close</a>";
                }
                else {
                    e.style.display = "none";
                    document.getElementById("triOpen1").innerHTML = "<a href="javascript:cloTri()">Open</a>";
                }
            }
        </script>
        <title></title>
    </head>
    <body>
        <table>
            <tr>
                <td class="auto" colspan ="4">These entities, related to THIS Methodology, are already included in this Model Extract</td>
            </tr>
            <tr>
                <td class="labelGreen"><a href="#tri" onclick="toggle_visibility1('tri1');"><span id="triOpen1">Open</span></a>&nbsp;ABBS 5 </td>
                <td class="labelGreen">Devices 15</td>
                <td class="labelGreen">Processes 2</td>
                <td class="labelGreen">Tests 13</td>
            </tr>
        </table>
        <div id="tri1" style="display:none;">
            <table>
                <tr>
                    <td class="values">Abbs List to go here</td>
                    <td class="values">Dev List to go here</td>
                    <td class="values">Process List to go here</td>
                    <td class="values">Testing List</td>
                </tr>
            </table>
        </div>
    </body>
</html>


正文{边框：0px；}
*{font:11px\Lucida Grande\，Verdana，无衬线；}
表{宽度：100%；边框：0px；边框间距：0px；表布局：固定；}
td{border:0px}
.values{垂直对齐：文本顶部}
.labelGreen{字体大小：粗体；颜色：#008000；}
td.auto{width:auto；}
.empty{margin:auto}
ul{列表样式：无；边距：0；填充：0；}
a{color:#888；文本装饰：无；字体大小：粗体；字体大小：10px；}
功能切换\u可见性1（id）
{
var e=document.getElementById（id）；
如果（e.style.display==“无”）
{
e、 style.display=“block”；
document.getElementById（“triOpen1”）.innerHTML=“”；
}
否则{
e、 style.display=“无”；
document.getElementById（“triOpen1”）.innerHTML=“”；
}
}
与此方法相关的这些实体已包含在此模型摘录中
ABBS 5
设备15
过程2
测试13
Abbs的名单在这里
要转到此处的开发列表
要转到此处的进程列表
测试表
JavaScript innerHtml新字符串中存在错误

JavaScript对新字符串的理解到此为止：

document.getElementById("triOpen1").innerHTML = "<a href="

document.getElementById（“triOpen1”）.innerHTML=“”
作为未知代码指令

试试这个：

            if (e.style.display == "none")
            {
                e.style.display = "block";
                document.getElementById("triOpen1").innerHTML = '<a href="javascript:openTri()">Close</a>';
            }
            else {
                e.style.display = "none";
                document.getElementById("triOpen1").innerHTML = '<a href="javascript:cloTri()">Open</a>';
            }

if（e.style.display==“无”）
{
e、 style.display=“block”；
document.getElementById（“triOpen1”）.innerHTML=''；
}
否则{
e、 style.display=“无”；
document.getElementById（“triOpen1”）.innerHTML=''；
}
尝试改用innerText

     function toggle_visibility1(id)
        {
            var e = document.getElementById(id);
            if (e.style.display == 'none')
            {
                e.style.display = 'block';
                document.getElementById('triOpen1').innerText = "Close";
            }
            else {
                e.style.display = 'none';
                document.getElementById('triOpen1').innerText = "Open";
            }
        }
这似乎与此有关，因此：

如果不想将html附加到现有内容，innerText是一个简单的解决方案。如果您想添加html，那么这种解决方案是合适的：

 function toggle_visibility1(id)
        {
            var e = document.getElementById(id);
            if (e.style.display == 'none')
            {
                e.style.display = 'block';

                switchElementContent('triOpen1','<a href="javascript:openTri()">Close</a>');
            }
            else {
                e.style.display = 'none';

                switchElementContent('triOpen1','<a href="javascript:cloTri()">Open</a>');
                container.appendChild(newdiv);
            }
        }

 function switchElementContent(elementId, newContent) 
        {
            var container = document.getElementById(elementId);
            container.innerText = '';
            var newdiv = document.createElement("div");
            newdiv.innerHTML = newContent;
            container.appendChild(newdiv);
        }

功能切换\u可视性1（id）
{
var e=document.getElementById（id）；
如果（e.style.display==“无”）
{
e、 style.display='block'；
switchElementContent（'triOpen1'，''）；
}
否则{
e、 style.display='none'；
switchElementContent（'triOpen1'，''）；
container.appendChild（newdiv）；
}
}
函数开关ElementContent（elementId，newContent）
{
var container=document.getElementById（elementId）；
container.innerText=''；
var newdiv=document.createElement（“div”）；
newdiv.innerHTML=newContent；
container.appendChild（newdiv）；
}
第二个选项是基于这样的：

在将来，你可能会考虑使用一些类似的代码来让你的代码更可读。如果你使用一个像jQuery这样的库，这会容易得多。但是它是一个不允许外部调用/外部文件的解决方案…谢谢-但是这不是问题……我确实试过了，但它不起作用-我的意思是-它在Firefox/Safari中仍然有效-但在IE 8Hi中不起作用-非常好-我不需要a href毕竟-innerText工作得很好-我以前尝试过innerText，但它仍然有a href，当然出现了…非常感谢Indeed，但是-我仍然需要使用innerHTML，因为1）它需要交叉平台，2）我不需要href，但我需要一些HTMLcharacters@user2634091我编辑了我的答案。也许现在你可以从那里找到更有用的东西。 
 function toggle_visibility1(id)
        {
            var e = document.getElementById(id);
            if (e.style.display == 'none')
            {
                e.style.display = 'block';

                switchElementContent('triOpen1','<a href="javascript:openTri()">Close</a>');
            }
            else {
                e.style.display = 'none';

                switchElementContent('triOpen1','<a href="javascript:cloTri()">Open</a>');
                container.appendChild(newdiv);
            }
        }

 function switchElementContent(elementId, newContent) 
        {
            var container = document.getElementById(elementId);
            container.innerText = '';
            var newdiv = document.createElement("div");
            newdiv.innerHTML = newContent;
            container.appendChild(newdiv);
        }