我正在学习 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>
还有其他方法可以在每个单元格中执行此事件吗？
【问题讨论】：
JS，再学jQuery。
标签： javascript html
我知道这有点旧，但是您应该在表格上使用点击事件并使用目标值来获取单元格。而不是 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>【讨论】：
有两种方式：
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')
【讨论】：
你也可以试试这个（使用事件委托）
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());
});
});
【讨论】：
下面的代码将返回被点击元素的包含文本。在这种情况下，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。这样，只有当用户点击表格的这一部分而不是当他点击其他元素时才会触发事件......
【讨论】：
试试：
var tds = document.getElementsByTagName("td");
for(var i in tds) tds[i].onclick = tes;
还有一个Demo...
将 document 替换为您需要在其中找到 td 的任何其他 dom 元素。
【讨论】：
你可以这样做：
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()};
}
}
【讨论】：
如果您可以访问 jquery，请执行此操作
$('#1 td').click(function(){
});
【讨论】：
您可能不需要将onclick 事件放在表中的每个TD 元素上。在表级别提供onclickevent 可以很容易地做到这一点，如下面的代码 sn-p 所示：
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>您可以借助event 参数在tes 函数内部进行适当的处理。
【讨论】：