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

16

我知道这有点旧，但是您应该在表格上使用 click 事件并使用目标值来获取单元格。而不是一个 10 x 10 表 = 100 个事件，您将只有 1 个。

该方法的最佳之处在于，当您添加新单元时，您无需再次绑定事件。

$(document).ready( function() {
    $('#myTable').click( function(event) {
      var target = $(event.target);
      $td = target.closest('td');
      
      $td.html(parseInt($td.html())+1);
      var col   = $td.index();
      var row   = $td.closest('tr').index();

      $('#debug').prepend('<div class="debugLine">Cell at position (' + [col,row].join(',') + ') clicked!</div>' );
      
    });
  });
td {
  background-color: #555555;
  color: #FFF;
  font-weight: bold;
  padding: 10px;
  cursor: pointer;
  }

#debug {
    background-color: #CCC;
    margin-top: 10px;
    padding: 10px;
  }

#debug .debugLine {
    margin: 2px 0;
    padding: 1px 5px;
    background-color: #EEE;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <td>0</td>    
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>    
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>    
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
</table>

<div id="debug"></div>

于 2016-03-26T18:02:59.267 回答
6

有两种方法：

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;

和一个演示......

将文档替换为您需要在其中找到 td 的任何其他 dom 元素。

于 2013-10-03T09:14:59.560 回答
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 回答
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 回答