[英]How to access specific cell of clicked table row in javascript
I have an HTML table populated from database. 我有一个从数据库填充的HTML表。 And a jquery function that adds client click event to every table row.
还有一个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.
任何人都可以告诉我如何在行单击时获得单个单元格值。
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: 这是您可以测试的代码:
First, there's no need for the .each
- the .click
method will bind to every passed element, not only the first. 首先,有没有必要的
.each
-的.click
方法将绑定到每一个通过元素,不仅是第一个。
Second, there's a specific properties called cells
on 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). 请注意事件委托的使用 - 事件处理程序实际上是在整个表上注册的,然后依赖于事件冒泡来告诉您单击了哪一行(并从中获取单元格文本)。
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集合来绑定事件是没用的,正如您从上一个代码中可以看到的那样。
I prefer this: 我更喜欢这个:
$('.TreeTable').on('click', 'td', function() { // td not tr
alert($(this).text());
});
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. 您不需要使用
.each()
将事件处理程序绑定到一组元素来显式迭代,事件绑定函数将隐式为您执行此操作。 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>
): 由于事件传播,您可以将事件处理程序绑定到
<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>
元素感兴趣。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.