Javascript innerHTML在IE中不起作用

Javascript innerHTML not working in IE

本文关键字：不起作用 IE innerHTML Javascript      更新时间：2023-09-26

我需要创建一个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();
}

您可以通过创建自定义.innerHTML（是的，这是一项艰巨的工作）或以其他方式修改.innerHTML属性/函数来解决此问题。我编写这段代码是为了确保在清除.inerHTML（IE的.inerHTML的另一个问题）时保留仍被引用的子元素数据，但它可以用于解决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/

这是一个已知的错误：只有在IE中创建表时，才能设置表的innerHTML。但是document.createElement和其他dom操作应该可以正常工作。或者，为了兼容性，您可以使用js-lib。

对于正常JS:

一个已知的、不那么难做的修复方法是创建所有元素，而不是创建一个包含所有内容的字符串并添加它

与您创建tr、创建tds等的方式相同。

在你的情况下，由于结构较大，做起来可能不太好，但。。。

为了更好的生活方式：

使用jQuery/prototype/mootools或任何其他您喜欢的库。

相关文章：