JavaScript事件在IE 8中不起作用

看來IE8忽略了我的點擊事件！當我按下「+」按鈕並在「 - 」上刪除它時，它應該添加一個新行。我是WEB開發新手，但我看不到其他任何問題。我測試它，它可以正常使用IE10，IE9，但不適用於IE8！你能幫我解決這個問題！JavaScript事件在IE 8中不起作用

我的HTML代碼：

<table id="sysAffectedTable2"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th><span class="locationName">Location Name</span></th> 
      <th>Subnet (Optional)</th> 
      <th>Add</th> 
      <th>Delete</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td><input type="text" id="locationName1" value="" name="locationName1"/></td> 
      <td><input type="text" id="subnet1" value="" name="subnet1"/></td> 
      <td><input type="button" style="width: 40px" id="addDiskButton2" value=" + " onclick="insertRow2()"/></td> 
      <td><input type="button" style="width: 40px" id="delDiskButton2" value=" - " onclick="deleteRow2(this)"/></td>  
     </tr> 
    </tbody>   
    </table>

我的JavaScript代碼：

<script type="text/javascript" language="javascript"> 
    var maxRow2=1; 


    var table2 = document.getElementById('sysAffectedTable2'), tbody2 = table2 
      .getElementsByTagName('tbody')[0], clone2 = tbody2.rows[0] 
      .cloneNode(true); 

    function deleteRow2(el) { 
     var i = el.parentNode.parentNode.rowIndex; 

     if (i != 1) { 
      table2.deleteRow(i); 
      while (table2.rows[i]) { 
       updateRow2(table2.rows[i], i, false); 
       i++; 
      } 
      maxRow2--; 
     } else if (i == 1) { 
      table2.deleteRow(i + 1); 
      while (table2.rows[i + 1]) { 
       updateRow2(table2.rows[i + 1], i + 1, false); 
       i++; 
      } 
      maxRow2--; 
     } 
    } 

    function insertRow2() { 
     if (maxRow2 < 32) { 
      var new_row = updateRow2(clone2.cloneNode(true), 
        ++tbody2.rows.length, true); 
      tbody2.appendChild(new_row); 
      maxRow2++; 
     } 
    } 

    function updateRow2(row2, a2, reset2) { 
     row2.cells[0].innerHTML = a2; 

     var inp1 = row2.cells[1].getElementsByTagName('input')[0]; 
     var inp2 = row2.cells[2].getElementsByTagName('input')[0]; 

     inp1.name = 'locationName' + a2; 
     inp1.id = 'locationName' + a2; 
     inp2.name = 'subnet' + a2; 
     inp2.id = 'subnet' + a2; 

     if (reset2) { 
      inp1.value = inp2.value = ''; 
     } 
     return row2; 
    } 
</script>

你可以看到它在現場here - http://jsfiddle.net/yHANj/1/

能不能請您幫幫我！

提前致謝！

來源

2013-10-07 Deniss Muntjans

更新了您的問題的標籤，因爲您發佈的JavaScript代碼不在任何地方使用jQuery。 – Blazemonger

爲什麼在天堂的名字是你使用jQuery v1.4.2？它在兩到三年*之前被更新的版本所取代。 –

@Blazemonger：但是如果你完全從這個問題中刪除了jQuery，那麼人們不會知道在他們的答案中依賴jQuery是沒有問題的，這並不好。（這隻有在您將其從標題和文本中刪除時才適用） –

被遇到在這一行錯誤：++tbody2.rows.length

顯然IE8的JavaScript引擎將這種情況不同於其他瀏覽器，但它沒有意義，能夠改變length屬性的行數該表在任何瀏覽器。如果你想改變表中的行數，你可以通過插入一個新的DOM元素來實現（你正在使用.appendChild()調用）。

將其更改爲tbody2.rows.length + 1而不是試圖直接增加length屬性。

編輯：的確，如果您嘗試增加length其他瀏覽器，則該語句似乎只是被忽略。 IE8拋出異常而不是忽略它。

來源

2013-10-07 17:42:54

感謝隊友的作品，你只是讓我的一天;） –

嗨大衛，所以我測試了我的webisite與IE8其工作完美，但我測試它與IE7和它似乎我有同樣的問題 - 如果你按「+」或「 - 」什麼都沒有發生:(請你幫我;）謝謝隊友！ –

您遇到了克隆IE7中的節點時遇到的問題：http://jehiah.cz/a/rows-and-cells-in-ie-when-using-clonenode。我重做了你的小提琴，以便它在IE7中運行：http://jsfiddle.net/dmillz/spYTv/。如果這是有幫助的，隨時upvote以前接受的答案:-) –

JavaScript事件在IE 8中不起作用

回答

相關問題