使用 Jquery 获取当前表行的 ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3807570/
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
Get the Id of current table row with Jquery
提问by Mick
Hi I have the following code in a form . When the user clicks a button I want to get the current row in order to identify which of the buttons was clicked
嗨，我在表单中有以下代码。当用户单击按钮时，我想获取当前行以识别单击了哪个按钮
<tr id="TEST1" >
<td align="left" valign="middle">
<div align="right">Contact</div>
</td>
<td colspan="4" align="left" valign="middle">
<input type="text" id="contact1" size="20" /> Number
<input type="text" id="number1" size="20" />
</td>
<td>
<input type="button" value="Button 1" id="contact1" />
</td>
</tr>
<tr id="TEST2" >
<td align="left" valign="middle">
<div align="right">Contact</div>
</td>
<td colspan="4" align="left" valign="middle">
<input type="text" id="contact2" size="20" /> Number
<input type="text" id="number2" size="20" />
</td>
<td>
<input type="button" value="Button 1" id="contact2" />
</td>
</tr>
<tr id="TEST3" >
<td align="left" valign="middle">
<div align="right">Contact</div>
</td>
<td colspan="4" align="left" valign="middle">
<input type="text" id="contact3" size="20" /> Number
<input type="text" id="number3" size="20" />
</td>
<td>
<input type="button" value="Button 1" id="contact2" />
</td>
</tr>
I thought the following Jquery would return the ID name but it doesn't
我以为下面的 Jquery 会返回 ID 名称，但它不会
$('input[type=button]' ).click(function() {
bid = (this.id) ; // button ID
trid = $('tr').attr('id'); // table row ID
});
Can anyone give me some advice please ? thanks
任何人都可以给我一些建议吗？谢谢
回答by Nick Craver
You can use .closest()to get up to the current <tr>parent, like this:
您可以使用.closest()来获取当前<tr>父级，如下所示：
$('input[type=button]' ).click(function() {
var bid = this.id; // button ID
var trid = $(this).closest('tr').attr('id'); // table row ID
});
回答by RobertPitt
Your code would be more like so:
你的代码会更像这样：
$('tr input[type=button]').click(function(){
id = $(this).closest('tr').attr('id');
});
回答by silvio.pereira
This:
这个：
<table id="test">
<tr id="TEST1" >
<td align="left" valign="middle"><div align="right">Contact</div></td>
<td colspan="4" align="left" valign="middle">
<input type="text" id="contact1" size="20" /> Number
<input type="text" id="number1" size="20" />
</td>
<td>
<input type="button" value="Button 1" id="contact1" /></td>
</tr>
<tr id="TEST2" >
<td align="left" valign="middle"><div align="right">Contact</div></td>
<td colspan="4" align="left" valign="middle">
<input type="text" id="contact2" size="20" /> Number
<input type="text" id="number2" size="20" />
</td>
<td>
<input type="button" value="Button 1" id="contact2" />
</td>
</tr>
<tr id="TEST3" >
<td align="left" valign="middle"><div align="right">Contact</div></td>
<td colspan="4" align="left" valign="middle">
<input type="text" id="contact3" size="20" /> Number
<input type="text" id="number3" size="20" />
</td>
<td>
<input type="button" value="Button 1" id="contact2" />
</td>
</tr>
and javascript:
和 javascript：
$(function() {
var bid, trid;
$('#test tr').click(function() {
trid = $(this).attr('id'); // table row ID
alert(trid);
});
});
});
It worked here!
它在这里工作！
回答by Praveen Prasad
$('input[type=button]' ).click(function() {
var bid = jQuery(this).attr('id'); // button ID
var trid = $(this).parents('tr:first').attr('id'); // table row ID
});
回答by Peter Ajtai
First, your jQuery will not work at all unless you enclose all your trs and tds in a table:
首先，除非您将所有trs 和tds 包含在一个表中，否则您的 jQuery 根本无法工作：
<table>
<tr>...</tr>
...
</table>
Second, your code gets the idof the first trof the page, since you select all the trs of the page and get the idof the first one (.attr()returns the attribute of the first element in the set of elements it is used on)
其次，你的代码获取id第一tr页的，因为你选择所有tr的页面的S和获得id的第一个（.attr()回报它使用的元素集合的第一个元素的属性）
Your current code:
您当前的代码：
$('input[type=button]' ).click(function() {
bid = (this.id) ; // button ID
trid = $('tr').attr('id'); // ID of the the first TR on the page
// $('tr') selects all trs in the DOM
});
trid is always TEST1 (jsFiddle)
trid 总是 TEST1 (jsFiddle)
Instead of selecting all trs on the page with $('tr'), you want to select the first ancestor of the clicked upon inputthat is a tr. Use .closest()for this in the form $(this).closest('tr').
不是选择tr页面上的所有s，而是选择$('tr')被点击的第一个祖先input是tr。使用.closest()形式为这个$(this).closest('tr')。
You can reference the clicked on element as this, make a jQuery object out of it with the form $(this), so you have access to all the jQuery methods on it.
您可以将点击的元素引用为this，使用 form 从中创建一个 jQuery 对象$(this)，这样您就可以访问其上的所有 jQuery 方法。
What your code should look like:
你的代码应该是什么样子：
// On DOM ready...
$(function() {
$('input[type=button]' ).click(function() {
var bid, trid; // Declare variables. If you don't use var
// you will bind bid and trid
// to the window, since you make them global variables.
bid = (this.id) ; // button ID
trid = $(this).closest('tr').attr('id'); // table row ID
});
});
jsFiddle example
jsFiddle 示例
回答by mohammad
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript"><!--
function getVal(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
alert(targ.innerHTML);
}
onload = function() {
var t = document.getElementById("main").getElementsByTagName("td");
for ( var i = 0; i < t.length; i++ )
t[i].onclick = getVal;
}
</script>
<body>
<table id="main"><tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr><tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr><tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr></table>
</body>
</html>
回答by billah77
Create a class in css name it .buttoncontact, add the class attribute to your buttons
在 css 中创建一个类，将其命名为 .buttoncontact，将 class 属性添加到您的按钮
function ClickedRow() {
$(document).on('click', '.buttoncontact', function () {
var row = $(this).parents('tr').attr('id');
var rowtext = $(this).closest('tr').text();
alert(row);
});
}
回答by ronIT
$('#tblCart tr').click(function () {
var tr_id = $(this).attr('id');
alert(tr_id );
});
<table class="table table-striped table-bordered table-hover" id="tblCart" cellspacing="0" align="center" >
<tr>
<th>
@Html.DisplayNameFor(model => model.Item.ItemName)
</th>
<th>
@Html.DisplayNameFor(model => model.Price.PriceAmount)
</th>
<th>
@Html.DisplayNameFor(model => model.Quantity)
</th>
<th>
@Html.DisplayNameFor(model => model.Subtotal)
</th>
<th></th>
</tr>
@if (cart != null)
{
foreach (var vm in cart)
{
<tr id="@vm.Id">
<td>
@Html.DisplayFor(modelItem => vm.Item.ItemName)
</td>
<td>
@Html.DisplayFor(modelItem => vm.Price.PriceAmount)
</td>
<td>
@Html.DisplayFor(modelItem => vm.Quantity)
</td>
<td>
@Html.DisplayFor(modelItem => vm.Subtotal)
</td>
<td >
<span style="width:80px; text-align:center;" class="glyphicon glyphicon-minus-sign" />
</td>
</tr>
}
}
</table>
