0

给定以下代码:

<!DOCTYPE html> <!-- HTML5 -->
<html>
    <head>
        <meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Cache-Control" content="no-cache">
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta http-equiv="content-language" content="en">
        <title>Untitled</title>
        <script type='text/javascript'>
            function createTableRow() {
                var tr = document.createElement("tr");
                var strWork = "<tr onmouseover='this.style.cursor=\"pointer\";'";
                strWork += " onmouseout='this.style.cursor=\"auto\";'";
                strWork += " onclick='ShowClick(this);'";
                strWork += " id='TestCell'><td>Test!</td></tr>";
                alert(strWork);
                tr.outerHTML = strWork;
                return tr;
            }

            function BuildTable() {
                var table = document.createElement("table");
                table.appendChild(createTableRow());
                return table;
            }

            function ShowClick(obj) {
                alert(obj.id);
            }
        </script>
    </head>
    <body onload='alert(BuildTable().outerHTML);'>
    &nbsp;
    </body>
</html>

第一个“警报”对话框显示了我希望形成的标记,但是,“onload=alert”行返回结果“<table><tr></tr></table>”。

我究竟做错了什么?为什么这些事件不绑定到 TR 标签?

另外,我想补充一点,我最初使用 javascript 分配了事件,即:

tr.onclick = function() { ShowClick(this); };

但是得到了完全相同的结果...

我真的不明白,我在任何地方都找不到关于这个问题的任何讨论......任何帮助将不胜感激!

4

4 回答 4

2

您的 createTableRow 功能已关闭...

您已经创建了“tr”作为对象。然后你放在"<tr"下一行。作为strWork变量的一部分。您基本上是在重复该任务,这会破坏 DOM。

function createTableRow ( ) {
    var tr = document.createElement("tr");
    tr.setAttribute("onmouseover" , "this.style.cursor='pointer';");
    tr.setAttribute("onmouseout" , "this.style.cursor='auto';");
    tr.setAttribute("onclick" , "showClick(this);");
    tr.setAttribute("id" , "TestCell");
    var td = document.createElement("td");
    td.appendChild(document.createTextNode("Test!"));
    tr.appendChild(td);

    return tr;
}
于 2012-08-20T01:24:24.883 回答
1

其他答案有有用的信息,这里有更多。如果你想使用标记来初始化一个 DOM 片段,你最好创建一个父节点并将标记作为它的 innerHTML 插入,例如:

function createTableRow() {
  var tBody = document.createElement('tbody');
  var strWork = "<tr onmouseover='this.style.cursor=\"pointer\";'"
              + " onmouseout='this.style.cursor=\"auto\";'"
              + " onclick='ShowClick(this);'"
              + " id='TestCell'><td>Test!</td></tr>";
  tBody.innerHTML = strWork;
  return tBody.firstChild;
}

但这在大多数版本的 IE 中都不起作用,因为您不能使用 innerHTML 或 outerHTML 来创建表格的一部分,尽管您可以使用它来创建整个表格。

此外,(再次在 IE 中),您必须将 tr 元素添加到 tbody 元素,而不是直接添加到表格,因为 tr 不能是表格的子元素,它必须是 tbody 的子元素——人们说 IE 是不符合标准,:-)

最重要的是,根据其他答案,您最好使用纯 DOM 来创建表格,而不是标记。

于 2012-08-20T02:55:33.273 回答
1

NO_MODIFICATION_ALLOWED_ERR您的代码在 JavaScript 控制台中抛出 a 。W3C 规范有这样的说法:

[ element.outerHTML]NO_MODIFICATION_ALLOWED_ERR如果元素的父节点是Document节点,则抛出异常。

同样的事情也发生在您的代码中。您在将tr'outerHTML 附加到另一个节点(例如table)之前设置它。这就是为什么它outerHTML不能改变。

最简单的解决方案是不使用outerHTML. 试试你原来的方法:

function createTableRow() {
  var tr = document.createElement('tr');
  tr.onmouseover = function() {
    this.style.cursor = 'pointer';
  };
  tr.onmouseout = function() {
    this.style.cursor = 'auto';
  };
  tr.onclick = function() {
    ShowClick(this);
  };
  tr.id = 'TestCell';
  tr.innerHTML = '<td>Test!</td>';
  return tr;
}

请注意,当您alert(或console.logtable'souterHTML时,您会看到如下内容:

<table><tr id="TestCell"><td>Test!</td></tr></table> 

但不要让那个愚弄你。事件处理程序没有显示出来,但那是因为它们直接附加到 DOM 节点,从而绕过了 HTML。请放心,它们可以完美运行。

要亲眼看看,试试这个现场演示:jsbin.com/oterit/1/edit

于 2012-08-20T01:31:26.737 回答
0

您缺少实际表格添加到正文的部分,即:

document.body.appendChild(table);

无论哪种方式,在浏览器中outerHTML创建trtd使用document.createElement都非常不一致,你最好的选择是使用table.insertRowrow.insertCell

function createTableRow(table) {
  var tr = table.insertRow(0);
  tr.onmouseover = function () { this.style.cursor = "pointer"; }
  tr.onmouseout = function () { this.style.cursor="auto"; }
  tr.onclick = function () { ShowClick(tr); }
  tr.id = "TestCell";
  var cell = tr.insertCell(0);
  cell.innerHTML = "Test!";
}

function BuildTable() {
  var table = document.createElement("table");
  table.appendChild(createTableRow());
  document.body.appendChild(table); // here's where you add the table to the page
  return table;
}

这是一个jsfiddle示例。

于 2012-08-20T01:28:50.683 回答