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.log）table'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创建tr和td使用document.createElement都非常不一致，你最好的选择是使用table.insertRow和row.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 回答