Javascript innerHTML在IE中不起作用

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

变量trNumber=1；
函数addTimeSheetRow（）{
var timeSheetBody=document.getElementById（“timeSheetBody”）；
var trow=document.createElement（“tr”）；
trow.innerHTML=“”+
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
""; 
时间表主体。附加子对象（trow）；
$（“tbody#timeSheetBody td输入：非（.initial）”）。每个（函数（）{
$（this）.keyup（function（）{
给（这个）打电话；
调用（这个）；
});
});
document.getElementsByName（“trNumber”）[0]。值=trNumber；
}
功能allowDrop（ev）
{
//ev.preventDefault（）；
ev.preventDefault？ev.preventDefault（）：ev.returnValue=false；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
//var projectElement=ev.target.parentNode；
//ev.dataTransfer.setData（“Text”，projectElement.getAttribute（“id”）；
//警报（projectElement.getAttribute（“id”）；
}
功能下降（ev）
{
//ev.preventDefault（）；
ev.preventDefault？ev.preventDefault（）：ev.returnValue=false；
var data=ev.dataTransfer.getData（“文本”）；
var taskName=document.getElementById（数据）.innerHTML；
//警报（任务名称）；
var trTaskName=“tr”+trNumber+“TaskName”；
ev.target.innerHTML=taskName+“”；
var projectName=document.getElementById（数据）.parentNode.getAttribute（“id”）；
//警报（项目名称）；
var projectTextBox=ev.target.parentNode.children[0]；
var trProjectName=“tr”+trNumber+“ProjectName”；
projectTextBox.innerHTML=projectName+“”；
trNumber=trNumber+1；
addTimeSheetRow（）；
}

这是一个已知的错误：只有在IE中创建表时，才能设置表的innerHTML。但是

document.createElement

和其他dom操作应该可以正常工作。或者，您可以使用js库来实现兼容性。

对于普通js：

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

与创建tr、创建tds等的方法相同

在你的情况下，可能不是很好做，因为大的结构，但

为了更好的生活方式：

---

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

您可以通过创建自定义的.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)

---

什么版本的IE？本机拖放仅适用于IE 9+JS控制台中的任何错误？很难说，但根据错误类型（不仅仅适用于IE和表处理），我会给出一个与

tbody

标记相关的快照。我试图检查IE中的错误，它无法识别您保留的第2个和其他td的标记，它应该是所有的td或th，它的html是不正确的拖放工作，但新行没有得到添加到IE9中，这个错误在IE8+中没有被修复吗？也许这是一个怪癖模式问题？你能解释一下wat是一个怪癖模式问题吗？这将成为一项乏味的工作。。除了使用innerHTML还有其他选择吗？本机。。。不，正如弗洛斯特所说，或者正如我在回答时所说。。。使用lib。我建议使用jQuery。让你的生活更轻松。或者，如果您愿意，您可以创建自己的函数来实现这一点，并将字符串数组（或字符串，如果您想将其拆分为多个部分）作为参数传递。或者，如果你可以选择忽略IE7（如果我没记错的话，这在IE8中是固定的（我确定是9，不确定是8））。我做了一个改变：如果你在代码运行之前没有加载变异观察器，尝试特定的错误检测。你也可以试试