Question

给出以下代码：

<!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”行返回结果“＆lt; table＆gt;＆lt; tr＆gt;＆lt; / tr＆gt;＆lt; / table＆gt ;”

我做错了什么？为什么这些事件不会绑定到TR标记？

另外，我想补充一点，我最初使用javascript分配事件，即：

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

但结果完全相同......

我真的不明白，我找不到任何关于这个问题的讨论......任何帮助都将不胜感激！

Answer 1

您的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;
}

Answer 2

您的代码在JavaScript控制台中抛出NO_MODIFICATION_ALLOWED_ERR。 W3C spec可以这样说：

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

您的代码中也会发生同样的事情。您在将tr添加到另一个节点之前设置了outerHTML的{{1}} （例如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.log）table的{{1}}时，您会看到以下内容：

outerHTML

但不要让那个愚弄你。事件处理程序不会显示，但这是因为它们直接附加到DOM节点，因此绕过了HTML。请放心，他们的工作非常完美。

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

Answer 3

其他答案包含有用信息，此处还有更多信息。如果要使用标记初始化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来创建表格，而不是标记，以及其他答案。

Answer 4

您缺少实际将表添加到正文中的部分，即：

document.body.appendChild(table);

无论哪种方式，outerHTML以及使用tr创建td和document.createElement在浏览器中都非常不一致，最好的办法是使用table.insertRow和{{ 1}}：

row.insertCell

这是一个jsfiddle例证。

标签不订阅事件

4 个答案: