所有单元格中的 Javascript onClick 事件

Question

我正在学习 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>

是否有另一种方法可以在每个单元格中执行此事件？

Answer 1

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

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

$(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>