0

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

3 回答 3

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/

于 2014-01-21T07:59:02.660 回答
1

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

于 2013-08-19T12:25:42.007 回答
0

对于普通 JS：

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

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

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

为了更好的生活方式：

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

于 2013-08-19T12:53:14.510 回答