0

私は JavaScript を初めて使用しますが、このプログラムが機能しない理由がわかりません。
動的に作成されたテーブルのセルにある動的に作成されたボタンをクリックしrowindexて、ボタンが配置されている行を取得したい。

前もって感謝します-これが私のコードです:

<html>
    <head>
        <script>
            function whichrow(obj) {
                var par = obj.parentNode;
                while(par.nodeName.toLowerCase()! = 'tr') {
                    par = par.parentNode;
                }
                alert(par.rowIndex);
            }
        </script>
    </head>
    <body> 
        <script>
        mybody = document.getElementsByTagName("body")[0];
        mytable = document.createElement("table");
        mytablebody = document.createElement("tbody");
        for(var i = 0; i<5; i++) {
            mycurrent_row = document.createElement("tr"); 
            mycurrent_row.id = "row"+i;

            for(var j = 0; j<4; j++) {
                mycurrentcell = document.createElement("td");  
                currenttext = document.createTextNode("Row" + i + "Column" + j);
                mycurrentcell.appendChild(currenttext);
                mycurrent_row.appendChild(mycurrentcell);
            }   
            mybutoncell = document.createElement("td");
            but = document.createElement("button");
            mybutoncell.appendChild(but);

            mycurrent_row.appendChild(mybutoncell);

            mytablebody.appendChild(mycurrent_row);
            but.onClick = whichrow(this);
        }
        mytable.appendChild(mytablebody);
        mybody.appendChild(mytable);

        mytable.setAttribute("border", "2"); 
        </script>
    </body>
</html>
4

2 に答える 2

1

さて、ここで注意すべき点がいくつかあります。

JavaScript イベンティング システムでは、システムは、何が起こったかに応じて、さまざまなプロパティを含む独自のイベント オブジェクトを使用してコールバックを呼び出します。

だから、ここに間違いがあります：

  1. イベント ハンドラに割り当てているとき、but.onclick = whichrow(this)but.onclick を の結果に設定していると言うときwhichrow、これはundefinedとにかく何も返さないためです。ユーザーがボタンをクリックしたときにbut.onclick = whichrow;呼び出されるものでなければなりません。whichrow渡されるパラメータはMouseEventオブジェクトです。私が提供したリンクは、利用可能なプロパティの種類を読むための良い出発点として役立つはずです.

  2. 私は el.addEventListeners をよく使用するため、確認するonclick必要がありますが、あなたが行ったようにキャメルケースではなく、小文字にする必要があります。

  3. イベント コールバック内では、this通常、クリックされた要素を参照するため、それを使用する必要があります。

  4. rowIndexプロパティはありません。

今、あなたの問題の解決策を見つけようとしています。rowIndex は、dom をトラバースすることで収集できます。とにかく手動でDOMを作成していて、すでにrowIndexを知っているので、これがどのような目的に役立つかはわかりませんが、それが不明な場合は、次のようにします

function whichRow(e) {
  // here this should be the button.
  var curRow = this.parentElement.parentElement,
      rowIndex = 0;

  while(curRow) {
    curRow = curRow.previousElementChild; 
    rowIndex++;
  }

  return rowIndex;
}

私はこれを頭のてっぺんから書いていますが、要点は主なアイデアを示すことです。上記のスニペットでは、ボタン セクションのおおよそのマークアップは次のとおりであるため、ボタンの親の親を取得しました。

<tr>
  <td>
    <button></button>
  </td>
</tr>

したがって、ボタン要素のparentElementのparentElementは、<tr>. 次に、前の要素がなくなるまで逆方向にトラバースし、カウントを進めます。前の要素が null になると、カウントを返します。

于 2012-12-27T15:15:53.437 に答える
0

objあなたが渡しているのwhichrow()はボタンTDです。したがって、whileループは最初の反復自体で終了し、 - という名前のプロパティを持たない - をpar保持することになりますTDrowIndex

于 2012-12-27T15:07:54.000 に答える