繁体   English   中英

外部javascript文件在IE中不起作用

[英]External javascript file not working in IE

我创建了这个测试html页面,该页面允许单个用户向表中添加条目。 它可以在Chrome和Firefox中正常运行。 但是当我在IE中尝试时,它不起作用。 我去了控制台,尝试添加行时它没有给我任何错误。 有人可以帮我弄清楚我需要使javascript部分正常工作吗? 提前谢谢了。 这是我所拥有的

HTML

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="css/style.css">
    <script src="javascript/script.js"></script>    
    <body>      
        <h1>Hello World</h1>
        <table id="myTable" class="editableTable">
            <caption><center>Table No 1</center></caption>
            <thead> 
                <tr> 
                    <th>ID</th> 
                    <th>Name</th> 
                    <th>Phone</th> 
                    <th>Email</th> 
                    <th>Address</th> 
                </tr> 
            </thead> 
            <tbody id="tablebody"> 
                <tr style="display:none" id="templaterow"> 
                    <td><div contenteditable></div></td> 
                    <td><div contenteditable></div></td> 
                    <td><div contenteditable></div></td> 
                    <td><div contenteditable></div></td> 
                    <td><div contenteditable></div></td>  
                    <td><input type ="image" src="assets/trash.ico" class="deleteIcon" onclick="myDeleteFunction(this)" /></td>                 
                </tr>           
            </tbody>            
        </table>
        <div class="tablebuttons"> <button onclick="myCreateFunction()">Add entry</button></div>        
    </body>
</html>

CSS

body {
    background-color: white;
}

h1 {
    text-align: center;
}

* { 
    font-family:Consolas 
} 

.editableTable { 
    border:solid 1px; 
    width:100%; 
} 

.editableTable td { 
    border:solid 1px; 
} 

.editableTable .cellEditing { 
    padding: 0; 
} 
.editableTable .cellEditing input[type=text]{ 
    width:100%; 
    border:0; 
    background-color:rgb(255,253,210); 
}

.deleteIcon {
    position: relative; 
    left: 25%;
    width: 15px;
    height: 15px;
}

使用Javascript

function myCreateFunction() {
    var newInstance = document.getElementById("templaterow").cloneNode(true);
    newInstance.style.display = null;
    newInstance.id = null;

    document.getElementById("tablebody").appendChild(newInstance);
}

function myDeleteFunction(r) {
    var rowCount = myTable.rows.length;
    var i = r.parentNode.parentNode.rowIndex;

    if(rowCount <= 1) return;

    document.getElementById("myTable").deleteRow(i);
}

这对我有用(花了足够长的时间)。

newInstance.style.display = null;

newInstance.style.display = "";

null值更改为"" 参见小提琴

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM