2015-11-02 57 views
1

我創建了這個測試html頁面,允許單個用戶向表中添加條目。它在Chrome和Firefox中運行良好。但是,當我在IE中嘗試它不起作用。我去了控制檯,當我嘗試添加一行時,它不會給我任何錯誤。有人可以幫我找出我需要什麼讓JavaScript部分工作?提前謝謝了。以下是我有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); 
} 

回答

1

這適用於我(花了很長時間)。

newInstance.style.display = null; 

newInstance.style.display = ""; 

變化null""。請參閱Fiddle

+0

它的工作!非常感謝 :) – mmangual83