所有单元格中的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

我知道这有点旧,但你应该在表上使用click envent并使用目标值来获取单元格.而不是10 x 10 table = 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>

Answer 2

你也可以尝试这个(使用事件委托)

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());
    });
});

例.

Answer 3

有两种方法:

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

和使用jQuery的另一种方式:

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

UPD:

要获得所需的内容,首先必须选择表格,因此,对于第一个选项:

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

而对于第二个,jQ选择器应该是这样的:

$('#1 td')