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

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

Answer 2

您可以通过制作自定义.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 3

FOR NORMAL JS：

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

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

在你的情况下，由于结构庞大但可能不太好，但是......

为了更好的生活方式：

使用jQuery / prototype / mootools或其他你喜欢的其他库。

Javascript innerHTML无法在IE中运行

3 个答案: