web-dev-qa-db-ja.com

テーブル行へのonclickイベントの追加

Javascriptを介してテーブル行にonclickイベントを追加しようとしています。

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        row = table.rows[i];
        row.onclick = function(){
                          var cell = this.getElementsByTagName("td")[0];
                          var id = cell.innerHTML;
                          alert("id:" + id);
                      };
    }
}

これはFirefoxでは正常に機能しますが、Internet Explorer（IE8）ではテーブルセルにアクセスできません。これは、onclick関数の「this」が「Table」（またはそのようなもの）ではなく「Window」として識別されるという事実に何らかの関係があると考えています。

現在の行にアクセスできる場合、onclick関数でgetElementByIdを実行できますが、その方法は見つかりません。助言がありますか？

javascripthtmldomdom-events
25
user80978

このようなもの。

function addRowHandlers() {
  var table = document.getElementById("tableId");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler = function(row) {
      return function() {
        var cell = row.getElementsByTagName("td")[0];
        var id = cell.innerHTML;
        alert("id:" + id);
      };
    };
    currentRow.onclick = createClickHandler(currentRow);
  }
}

[〜＃〜] edit [〜＃〜]

作業中 デモ 。

34
SolutionYogi

IEの場合は Eventオブジェクト のsrcElementプロパティを使用する必要があります。jQueryがオプションである場合は、それを使用することを検討してください。ブラウザのほとんどの違いを抽象化します。

$("#tableId tr").click(function() {
   alert($(this).children("td").html());
});
4
Nick Riggs

これは、同じ純粋なJavascript（jQuery）ソリューションのコンパクトで少しすっきりしたバージョンです@redsquareおよび@SolutionYogi（上記で説明したように、すべてのHTMLテーブル行にonclickイベントハンドラーを追加）は、最新のIE11を含むすべての主要なWebブラウザーで動作します。

_function addRowHandlers() {
    var rows = document.getElementById("tableId").rows;
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function(){ return function(){
               var id = this.cells[0].innerHTML;
               alert("id:" + id);
        };}(rows[i]);
    }
}
window.onload = addRowHandlers();
_

作業中 [〜＃〜] demo [〜＃〜]

注：IE8でも同様に機能させるために、thisポインターの代わりに、@が示唆するfunction(myrow)などの明示的な識別子を使用します赤の広場。宜しくお願いします、

2
Alexander Bell

頭がjqで長すぎます。これは動作します。

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        var row = table.rows[i];
        row.onclick = function(myrow){
                          return function() { 
                             var cell = myrow.getElementsByTagName("td")[0];
                             var id = cell.innerHTML;
                             alert("id:" + id);
                      };
                  }(row);
    }
}
1
redsquare

簡単な方法は以下のようにコードを生成します：

<!DOCTYPE html>
<html>
<head>

<style>
  table, td {
      border:1px solid black;
  }
</style>

</head>
<body>
<p>Click on each tr element to alert its index position in the table:</p>
<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
  function myFunction(x) {
      alert("Row index is: " + x.rowIndex);
  }
</script>

</body>
</html>
0
Zolfaghari

これが私がこれを行う方法です。 theadタグとtbodyタグでテーブルを作成します。そして、クリックイベントをIDでtbody要素に追加します。

<script>
    document.getElementById("mytbody").click = clickfunc;
    function clickfunc(e) {
        // to find what td element has the data you are looking for
        var tdele = e.target.parentNode.children[x].innerHTML;
        // to find the row
        var trele = e.target.parentNode;
    }
</script>
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody id="mytbody">
        <tr><td>Data Row</td><td>1</td></tr>
        <tr><td>Data Row</td><td>2</td></tr>
        <tr><td>Data Row</td><td>3</td></tr>
    </tbody>
</table>
0
user3121053

私のテーブルは別のiframeにあるので、私はSolutionYogiと答えて修正しました：

<script type="text/javascript">
window.onload = addRowHandlers;
function addRowHandlers() {
    var iframe = document.getElementById('myiframe');
    var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

    var table = innerDoc.getElementById("mytable");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;
                                        alert("id:" + id);
                                 };
            }

        currentRow.onclick = createClickHandler(currentRow);
    }
}
</script>
0
Fco Javier Rod Ca

テーブル行を選択して、簡単にクリップボードにコピーしてからExcelに貼り付けられるようにしました。以下は、ソリューションの小さな適応です。

参照：

<!DOCTYPE html>
<html>
<body>

<div>
    <table id="tableId" border=1>
      <tbody>
        <tr><td>Item <b>A1</b></td><td>Item <b>B1</b></td></tr>
        <tr><td>Item <b>A2</b></td><td>Item <b>B2</b></td></tr>
        <tr><td>Item <b>A3</b></td><td>Item <b>B3</b></td></tr>
      </tbody>
    </table>
</div>

<script>
function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;

                                        var cell1 = row.getElementsByTagName("td")[1];
                                        var id2 = cell1.innerHTML;
                                        // alert(id + " - " + id2);
                                        window.Prompt("Copy to clipboard: Ctrl+C, Enter", "<table><tr><td>" + id + "</td><td>" + id2 + "</td></tr></table>")
                                 };
            };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();
</script>
</body>
</html>
0
robertocm

this.getElementsByTagName("td")[0])行を変更して、row.getElementsByTagName("td")[0];を読み取ってください。これは、クロージャ内のrow参照をキャプチャし、期待どおりに動作するはずです。

編集：行はグローバル変数であるため、上記は間違っています-他の人が言ったように、新しい変数を割り当ててからクロージャーでTHATを使用します。

0
Luke Rinard

ほとんどの回答はSolutionYogiの回答のコピーですが、ヘッダーをクリックするとエラーが返される「セル」がnullではないかどうかを確認する重要なチェックを見逃しています。だから、ここにチェックが含まれている答えです：

function addRowHandlers() {
  var table = document.getElementById("tableId");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler = function(row) {
      return function() {
        var cell = row.getElementsByTagName("td")[0];
        // check if not null
        if(!cell) return; // no errors! 
        var id = cell.innerHTML;
        alert("id:" + id);
      };
    };
    currentRow.onclick = createClickHandler(currentRow);
  }
}
0
Cornelius