Javascript innerHTML在IE中不起作用

Question

我需要創建一個Web應用程序，用戶在其中拖放任務名稱，然後相應的任務名稱必須出現在表格中。

發生這種情況時，必須在發生丟棄時添加新行。

我已經使用JavaScript拖放和添加新行。

我的代碼在Chrome和Firefox中工作，但不在IE中。爲什麼？

這裏是我的代碼示例。

<script type = "text/javascript"> 

var trNumber = 1; 

function addTimeSheetRow(){ 
    var timeSheetBody = document.getElementById("timeSheetBody"); 
    var trow = document.createElement("tr"); 

    trow.innerHTML = "<th ondragstart='return false;' ondrop='return false;'></th>" + 
    "<th ondrop='drop(event)' ondragover='allowDrop(event)' value='' class='dropTexts'></th>" + 
    "<td><input name=" + getTrDayNames("Mon") + " type='text' value='' size='2'/></td>" + 
    "<td><input name=" + getTrDayNames("Tue") + " type='text' value='' size='2'/></td>" + 
    "<td><input name=" + getTrDayNames("Wed") + " type='text' value='' size='2'/></td>" + 
    "<td><input name=" + getTrDayNames("Thu") + " type='text' value='' size='2'/></td>" + 
    "<td><input name=" + getTrDayNames("Fri") + " type='text' value='' size='2'/></td>" + 
    "<td><input name=" + getTrDayNames("Sat") + " type='text' value='' size='2'/></td>" + 
    "<td><input name=" + getTrDayNames("Sun") + " type='text' value='' size='2'/></td>" + 
    "<td class='total'><input type='text' value='0' size='2' readonly='readonly'/></td>"; 

    timeSheetBody.appendChild(trow); 

    $("tbody#timeSheetBody td input:not(.intial)").each(function() { 
     $(this).keyup(function(){ 
      newSum.call(this); 
      colSum.call(this); 

     }); 
    }); 

    document.getElementsByName("trNumber")[0].value = trNumber; 
} 

function allowDrop(ev) 
{ 
    //ev.preventDefault(); 
    ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; 
} 
function drag(ev) 
{ 
    ev.dataTransfer.setData("Text",ev.target.id); 
    //var projectElement = ev.target.parentNode; 
    //ev.dataTransfer.setData("Text", projectElement.getAttribute("id")); 
    //alert(projectElement.getAttribute("id")); 
} 

function drop(ev) 
{ 
    //ev.preventDefault(); 
    ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; 
    var data = ev.dataTransfer.getData("Text"); 
    var taskName =document.getElementById(data).innerHTML; 
    //alert(taskName); 
    var trTaskName = "tr" + trNumber + "TaskName"; 
    ev.target.innerHTML = taskName + "<input name=" + trTaskName + " type='hidden' value='" + taskName + "' size='2' class='intial'/>"; 


    var projectName = document.getElementById(data).parentNode.getAttribute("id"); 
    //alert(projectName); 
    var projectTextBox = ev.target.parentNode.children[0]; 
    var trProjectName = "tr" + trNumber + "ProjectName"; 
    projectTextBox.innerHTML = projectName + "<input name=" + trProjectName + " type='hidden' value='" + projectName + "' size='2' class='intial'/>"; 


    trNumber = trNumber + 1; 

    addTimeSheetRow(); 
} 

Answer 1

您可以通過定製.innerHTML（是的，它有很多工作）或以其他方式修改.innerHTML屬性/函數來解決此問題。我做了這段代碼，以確保在清除.innerHTML（IE的.innerHTML的另一個問題）時仍保留仍然引用的子元素數據，但它可以適用於解決IE表問題。

if (/(msie|trident)/i.test(navigator.userAgent)) { 
var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get 
var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set 
Object.defineProperty(HTMLElement.prototype, "innerHTML", { 
    get: function() {return innerhtml_get.call (this)}, 
    set: function(new_html) { 
    var childNodes = this.childNodes 
    for (var curlen = childNodes.length, i = curlen; i > 0; i--) { 
    this.removeChild (childNodes[0]) 
    } 
    innerhtml_set.call (this, new_html) 
    } 
}) 
} 

var mydiv = document.createElement ('div') 
mydiv.innerHTML = "test" 
document.body.appendChild (mydiv) 

document.body.innerHTML = "" 
console.log (mydiv.innerHTML) 

http://jsfiddle.net/DLLbc/9/
http://jsfiddle.net/DLLbc/12/

Answer 2

這是一個已知的bug：只有當您在IE中創建表時，纔可以設置表的innerHTML。但document.createElement和其他的dom操作應該可以正常工作。或者，您可以使用js lib來兼容。

Answer 3

正常的JS：

已知且沒有那麼難做到的解決方法是創建所有的元素，而不是創建所有內容的字符串，並將其添加。

創建的TR，創建TDS用同樣的方法，等等。

在你的情況可能沒那麼好，因爲大的結構做的，但...

生活更好的辦法：

使用jQuery/prototype/mootools或其他任何你喜歡的庫。