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

コードNO_MODIFICATION_ALLOWED_ERRはJavaScriptコンソールにをスローします。W3C仕様には、次のように書かれています。

要素の親がノードである場合、[ element.outerHTML]は例外をスローします。NO_MODIFICATION_ALLOWED_ERRDocument

同じことがコードでも起こります。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;
}

'sを使用すると、次のように表示されることに注意してくださいalert。console.logtableouterHTML

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

しかし、それであなたを騙してはいけません。イベントハンドラーは表示されませんが、これは、イベントハンドラーがDOMノードに直接接続されているため、HTMLをバイパスしているためです。それらは完全に機能しますのでご安心ください。

自分の目で確かめるには、次のライブデモを試してください：jsbin.com/oterit/1/edit

于 2012-08-20T01:31:26.737 に答える
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;
}

ただし、innerHTMLまたはouterHTMLを使用してテーブルの一部を作成することはできませんが、テーブル全体を作成するために使用できるため、IEのほとんどのバージョンでは機能しません。

また、（これもIEで）、trはテーブルの子にはなれず、tbodyの子である必要があるため、テーブルに直接ではなく、tbody要素に追加する必要があります。IEはそうではないと言われています。標準に準拠していません、:-)

肝心なのは、他の答えによれば、マークアップではなく、純粋なDOMを使用してテーブルを作成するのが最善であるということです。

于 2012-08-20T02:55:33.273 に答える
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 に答える