10

私は JavaScript を学んでいますが、あまり経験がありません。しかし、私は HTML テーブルを作成しており、すべてのテーブル セル ( <td>) に onClick イベントを追加したいと考えています。

<table id="1">
    <tr>
        <td onClick="tes()">1</td><td onClick="tes()">2</td>
    </tr>
    <tr>
        <td onClick="tes()">3</td><td onClick="tes()">4</td>
    </tr>
</table>

すべてのセルでこのイベントを行う別の方法はありますか?

4

8 に答える 8

6

次の 2 つの方法があります。

var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
   cells[i].onclick = function(){tes();};
}

jQueryを使用した別の方法：

$('td').click(function(){tes();});

更新:

必要なものを正確に取得するには、まずテーブルを選択する必要があるため、最初のオプションの場合:

var table = document.getElementById('1');
var cells = table.getElementsByTagName("td"); 
...

次に、jQ セレクターは次のようになります。

$('#1 td')
于 2013-10-03T09:13:07.117 に答える
6

これも試すことができます（イベント委任を使用）

window.onload = function(){
    document.getElementById('tbl1').onclick = function(e){
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if(target.tagName.toLowerCase() ==  "td") {
            alert(target.innerHTML);
        }
    };
};

例。

jQuery の使用

$(function(){
    $('#tbl1').on('click', 'td', function(){
        alert($(this).html());
    });
});

例。

于 2013-10-03T09:20:02.817 に答える
2

次のコードだけで、クリックされた要素に含まれるテキストが返されます。この場合、td

event.target.innerText

例：

td
{
    border: 1px solid red;
}
     <table onclick="alert(event.target.innerText)">
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
        </tr>
        <tr>
            <td>cell 3</td>
            <td>cell 4</td>
        </tr>
    </table>

もちろん、これを js に実装して、通常どおり onclick イベントにアタッチすることもできます( javascript でaddEventListener()関数を検索してください)。必要に応じて、テーブルを thead、tbody、tfoot に分割し、onclick イベントを tbody のみに追加できます。このようにして、ユーザーがテーブルのこのセクションをクリックした場合にのみイベントがトリガーされ、他の要素をクリックした場合ではありません...

于 2016-08-04T03:33:58.810 に答える
1

試す ：

var tds = document.getElementsByTagName("td");

for(var i in tds) tds[i].onclick = tes;

そしてデモ...

documentを、td を見つけるために必要な他の dom 要素に置き換えます。

于 2013-10-03T09:14:59.560 に答える
0

jqueryにアクセスできる場合は、これを行います

$('#1 td').click(function(){

});
于 2013-10-03T09:14:34.973 に答える
0

onclickテーブル内のすべてのTD要素にイベントを配置する必要はない場合があります。以下のコード スニペットに示すように、テーブル レベルでイベントを提供するonclickと、簡単にトリックを実行できます。

function tes(event) {
  if (event.target.nodeName == "TD") {
    alert('TD got clicked');
  }
}
  
  td {
    border: 1px solid black;
  }
  
<html>
  <head>
    <title>Tic-Tac-Toe</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <table id='gameBoard' width="300" height="300" onclick="tes(event);">
        <tr>
          <td data-index = "0 0"></td>
          <td data-index = "0 1"></td>
          <td data-index = "0 2"></td>
        </tr>
        <tr>
            <td data-index = "1 0"></td>
            <td data-index = "1 1"></td>
            <td data-index = "1 2"></td>
        </tr>
        <tr>
            <td data-index = "2 0"></td>
            <td data-index = "2 1"></td>
            <td data-index = "2 2"></td>
        </tr>
      </table>
    </div>
  </body>
</html>

tesパラメータを使用して、関数内で適切な処理を行うことができeventます。

于 2019-01-11T09:57:14.963 に答える
0

あなたはそのようなことをすることができます： 

  var tbl = document.getElementById("1");
    var numRows = tbl.rows.length;

    for (var i = 1; i < numRows; i++) {
        var ID = tbl.rows[i].id;
        var cells = tbl.rows[i].getElementsByTagName('td');
        for (var ic=0,it=cells.length;ic<it;ic++) {
            cells[ic].OnClick = new function() {tes()};
        }
    }
于 2013-10-03T09:14:25.077 に答える