Javascript jQuery - 在表中的 <tr> 元素上单击事件并获取 <td> 元素值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3458571/
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
jQuery - Click event on <tr> elements with in a table and getting <td> element values
提问by Randall Kwiatkowski
I have the following HTML in a JSPfile:
我在JSP文件中有以下 HTML ：
<div class="custList">
<table class="dataGrid">
<c:forEach var="cust" items="${custList}">
<tr>
<td>${cust.number}</td>
<td>${cust.description}</td>
<td>${cust.type}</td>
<td>${cust.status}</td>
</tr>
</c:forEach>
</table>
</div>
I need to be able to trigger a 'click'event on each of the dynamically created <tr>tags and also be able to access the values of the <td>tags (of the clicked <tr>) from within the JavaScript function. I have this function already, but sadly it doesn't seem to be working.
我需要能够'click'在每个动态创建的<tr>标签上触发一个事件，并且还能够从 JavaScript 函数中访问<td>标签（ clicked <tr>）的值。我已经有了这个功能，但遗憾的是它似乎不起作用。
$(document).ready(function() {
$("div.custList > table > tr").live('click', function() {
alert("You clicked my <tr>!");
//get <td> element values here!!??
});
});
Update (Jan 2016): jQuery.live is deprecated (as noted here:http://api.jquery.com/live/)
更新（2016 年 1 月）：不推荐使用 jQuery.live（如此处所述：http://api.jquery.com/live/ ）
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.
从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。
回答by BalusC
Unless otherwise definied (<tfoot>, <thead>), browsers put <tr>implicitlyin a <tbody>.
除非另有定义 ( <tfoot>, <thead>)，浏览器将<tr>隐式放入<tbody>.
You need to put a > tbodyin between > tableand > tr:
你需要> tbody在> tableand之间加一个> tr：
$("div.custList > table > tbody > tr")
Alternatively, you can also be less strict in selecting the rows (the >denotes the immediatechild):
或者，您也可以在选择行时不那么严格（the>表示直接的孩子）：
$("div.custList table tr")
That said, you can get the immediate <td>children there by $(this).children('td').
也就是说，您可以<td>通过$(this).children('td').
回答by SimonDowdles
Try jQuery's delegate()function, like so:
试试 jQuery 的delegate()函数，像这样：
$(document).ready(function(){
$("div.custList table").delegate('tr', 'click', function() {
alert("You clicked my <tr>!");
//get <td> element values here!!??
});
});
A delegate works in the same way as live()except that live()cannot be applied to chained items, whereas delegate()allows you to specify an element within an element to act on.
委托的工作方式与live()除了live()不能应用于链式项目之外的方式相同，而delegate()允许您在元素中指定要对其进行操作的元素。
回答by Erik Ramirez
This work for me!
这对我有用！
$(document).ready(function() {
$(document).on("click", "#tableId tbody tr", function() {
//some think
});
});
回答by Nilesh Savaliya
$("body").on("click", "#tableid tr", function () {
debugger
alert($(this).text());
});
$("body").on("click", "#tableid td", function () {
debugger
alert($(this).text());
});
回答by JKirchartz
Since TR elements wrap the TD elements, what you're actually clicking is the TD (it then bubbles up to the TR) so you can simplify your selector. Getting the values is easier this way too, the clicked TD is this, the TR that wraps it is this.parent
由于 TR 元素包含 TD 元素，因此您实际单击的是 TD（然后冒泡到 TR），因此您可以简化选择器。通过这种方式获取值也更容易，点击的 TD 是 this，包装它的 TR 是 this.parent
Change your javascript code to the following:
将您的 javascript 代码更改为以下内容：
$(document).ready(function() {
$(".dataGrid td").click(function() {
alert("You clicked my <td>!" + $(this).html() +
"My TR is:" + $(this).parent("tr").html());
//get <td> element values here!!??
});
});?
回答by VeeWee
$(this).find('td')will give you an array of td's in the tr.
$(this).find('td')将在 tr 中为您提供一组 td。
回答by sanjivani patil
<script>
jQuery(document).ready(function() {
jQuery("tr").click(function(){
alert("Click! "+ jQuery(this).find('td').html());
});
});
</script>
