<TR>标记未订阅事件

<TR> tag not subscribing events

本文关键字：事件 lt TR gt      更新时间：2023-09-26

给定以下代码：

<!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"；行返回结果"0"<表>lt；tr>lt/tr>lt/表>"；。

我做错了什么？为什么这些事件没有绑定到TR标签？

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

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

但结果完全一样。。。

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

您的createTableRow函数已关闭…

您已经创建了"tr"作为对象。然后你把"<tr"放在下一行。作为CCD_ 2变量的一部分。你基本上是在重复这个任务，这会破坏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;
}

您的代码在JavaScript控制台中抛出一个NO_MODIFICATION_ALLOWED_ERR。W3C规范是这样说的：

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

同样的事情也发生在您的代码中。在将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的outerHTML时，您将看到如下内容：

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

但不要让它愚弄你。事件处理程序不会显示，但这是因为它们直接附加到DOM节点，从而绕过了HTML。请放心，它们工作得很完美。

要亲自查看，请尝试此实时演示：jsbin.com/oterit/1/edit

其他答案有有用的信息，这里有更多信息。如果您想使用标记来初始化DOM片段，最好创建一个父节点，并将标记作为其内部HTML插入，例如：

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来创建表，而不是标记。

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

document.body.appendChild(table);

无论哪种方式，outerHTML和用document.createElement创建tr和td在浏览器之间都非常不一致，最好使用strWork0和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示例。

相关文章：