JavaScript 添加表格行 onclick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14044257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript to add table row onclick events
提问by Alex_B
I'm new to Javascript. I want to add onclick events to table rows. I'm not using JQuery.
我是 Javascript 的新手。我想将 onclick 事件添加到表行。我没有使用 JQuery。
I loop thru the rows and use a closure to make sure I have the state of the outer function for each row. The looping works. Using alerts, I see the function being assigned for each iteration. But when I click the row, no alert is displayed. Below is the HTML and code that can be loaded.
我遍历行并使用闭包来确保我拥有每一行的外部函数的状态。循环工作。使用警报，我看到为每次迭代分配的功能。但是当我单击该行时，没有显示任何警报。下面是可以加载的 HTML 和代码。
Why are the table row events not working?
为什么表行事件不起作用？
<!doctype html>
<html lang="en">
<body>
<script>
function example4() {
var table = document.getElementById("tableid4");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
var curRow = table.rows[i];
//get cell data from first col of row
var cell = curRow.getElementsByTagName("td")[0];
curRow.onclick = function() {
return function() {
alert("row " + i + " data="+ cell.innerHTML);
};
};
}
}
function init() { example4(); }
window.onload = init;
</script>
<div>
Use loop to assign onclick handler for each table row in DOM. Uses Closure.
<table id="tableid4" border=1>
<tbody>
<tr><td>Item one</td></tr>
<tr><td>Item two</td></tr>
<tr><td>Item three</td></tr>
</tbody>
</table>
</div>
</body>
</html>
回答by mplungjan
This seem to be the canonical way
这似乎是规范的方式
function example4() {
var table = document.getElementById("tableid4");
var rows = table.rows; // or table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
rows[i].onclick = (function() { // closure
var cnt = i; // save the counter to use in the function
return function() {
alert("row"+cnt+" data="+this.cells[0].innerHTML);
}
})(i);
}
}
window.onload = function() { example4(); }?
UPDATE: @ParkerSuperstar suggested that the i in (i) is not needed. I have not tested this but his fiddleseems to work.
更新：@ParkerSuperstar 建议不需要 (i) 中的 i。我没有测试过这个，但他的小提琴似乎有效。
回答by jeremy
I'm not quite sure why you're using a closure here, could you be a bit more elaborate?
我不太确定你为什么在这里使用闭包，你能更详细一点吗？
The reason you're not seeing the desired alert is because within the onclick function, you're returning another function. I.e:
您没有看到所需警报的原因是因为在 onclick 函数中，您正在返回另一个函数。IE：
window.onload = function() {
return function() {
alert("Closure... why?");
};
};
Something like this won't really work because you're never calling the nested function... try it without using the closure, or comment explaining why you want a closure because you're explanation didn't make much sense to me.
像这样的事情不会真正起作用，因为你从不调用嵌套函数......在不使用闭包的情况下尝试它，或者评论解释你为什么想要闭包，因为你的解释对我来说没有多大意义。
回答by zafus_coder
You just have to remove an extra function and script will be like this
你只需要删除一个额外的函数，脚本就会像这样
<script>
function example4() {
var table = document.getElementById("tableid4");
cells = table.getElementsByTagName('td');
for (var i=0,len=cells.length; i<len; i++){
cells[i].onclick = function(){
alert(this.innerHTML);
}
}
}
function init() { example4(); }
window.onload = init;
</script>
