jQuery 如何访问javascript中单击的表格行的特定单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15615825/
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
How to access specific cell of clicked table row in javascript
提问by Ashish Rathore
I have an HTML table populated from database. And a jquery function that adds client click event to every table row.
我有一个从数据库填充的 HTML 表。以及将客户端单击事件添加到每个表行的 jquery 函数。
$(function() {
$(".TreeTable tr").each(function(index) {
$(this).click(function() {
alert($(this).text());
});
});
});
Now I am able to get complete row values by clicking on any row. Now I need to access individual cell value in that function. Can any one tell me how I get individual cell value on row click.
现在我可以通过单击任何行来获得完整的行值。现在我需要访问该函数中的单个单元格值。任何人都可以告诉我如何在行单击时获得单个单元格值。
回答by leoinfo
Take a look at this:
看看这个：
$(document).ready(function(){
$('.TreeTable tr').click(function(e){
var cell = $(e.target).get(0); // This is the TD you clicked
var tr = $(this); // This is the TR you clicked
$('#out').empty();
$('td', tr).each(function(i, td){
$('#out').html(
$('#out').html()
+'<br>'
+i+': '+$(td).text()
+ (td===cell?' [clicked]':'') );
});
});
});
Here is the working code: http://jsfiddle.net/VbA9D/
这是工作代码：http: //jsfiddle.net/VbA9D/
In case you have other HTML elements inside the table cells on which you might click, the below example will work better:
如果您可能单击的表格单元格中有其他 HTML 元素，下面的示例会更好地工作：
$(document).ready(function(){
$('.TreeTable tr').click(function(e){
var cell = $(e.target).get(0); // This is the TD you clicked
if(cell.nodeName != 'TD')
cell = $(cell).closest('td').get(0);
var tr = $(this); // This is the TR you clicked
$('#out').empty();
$('td', tr).each(function(i, td){
$('#out').html(
$('#out').html()
+'<br>'
+i+': '+$(td).text()
+ (td===cell?' [clicked]':'') );
});
});
});
And here is the code you can test:
这是您可以测试的代码：
回答by Alnitak
First, there's no need for the .each- the .clickmethod will bind to every passed element, not only the first.
首先，不需要.each- 该.click方法将绑定到每个传递的元素，而不仅仅是第一个。
Second, there's a specific properties called cellson table row elements that gives direct access to the row's cells:
其次，cells表行元素上有一个特定的属性，可以直接访问行的单元格：
$('.TreeTable').on('click', 'tr', function() {
var td = this.cells[0]; // the first <td>
alert( $(td).text() );
});
Note the use of event delegation - the event handler is actually registered on the entire table, and then relies on event bubbling to tell you which row was clicked (and from that obtain the cell text).
请注意事件委托的使用 - 事件处理程序实际上是在整个表格上注册的，然后依靠事件冒泡来告诉您单击了哪一行（并从中获取单元格文本）。
回答by Mr_Green
I prefer this:
我更喜欢这个：
$('.TreeTable').on('click', 'td', function() { // td not tr
alert($(this).text());
});
回答by Anthony Grist
You don't need to explicitly iterate using .each()to bind event handlers to a set of elements, the event binding functions will implicitly do that for you. Due to event propagation, you can bind an event handler to the <tr>and use event.target(the originating element) to get a reference to the element that was actually clicked on (the <td>):
您不需要显式迭代 using.each()将事件处理程序绑定到一组元素，事件绑定函数将为您隐式执行此操作。由于事件传播，您可以将事件处理程序绑定到<tr>并使用event.target（原始元素）来获取对实际单击的元素（<td>）的引用：
$(function() {
$('.TreeTable tr').click(function(event) {
console.log(this); // the <tr>
console.log(event.target); // the <td>
});
});
That's assuming you're interested in the specific <td>element that was clicked on.
假设您对<td>单击的特定元素感兴趣。
回答by Denys Séguret
You can get the second cell by using
您可以通过使用获得第二个单元格
alert($('td', this).eq(1).text());
Usually, for a more reliable code, you'll prefer to add a class to your desired cell so that you can use
通常，为了获得更可靠的代码，您更愿意向所需的单元格添加一个类，以便您可以使用
alert($('td.myclass', this).text());
If what you want is to get the cell which was clicked, simply bind the event to the cell :
如果您想要的是获取被点击的单元格，只需将事件绑定到单元格：
$(".TreeTable td").click(function() { // td not tr
alert($(this).text());
});
Note that it's useless to loop over a jQuery collection to bind an event, as you can see from my last code.
请注意，循环遍历 jQuery 集合来绑定事件是没有用的，正如您从我的上一个代码中看到的那样。
