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="开发者_JS百科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
$('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
You can use .closest()
to get up to the current <tr>
parent, like this:
$('input[type=button]' ).click(function() {
var bid = this.id; // button ID
var trid = $(this).closest('tr').attr('id'); // table row ID
});
Your code would be more like so:
$('tr input[type=button]').click(function(){
id = $(this).closest('tr').attr('id');
});
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:
$(function() {
var bid, trid;
$('#test tr').click(function() {
trid = $(this).attr('id'); // table row ID
alert(trid);
});
});
It worked here!
$('input[type=button]' ).click(function() {
var bid = jQuery(this).attr('id'); // button ID
var trid = $(this).parents('tr:first').attr('id'); // table row ID
});
First, your jQuery will not work at all unless you enclose all your tr
s and td
s in a table:
<table>
<tr>...</tr>
...
</table>
Second, your code gets the id
of the first tr
of the page, since you select all the tr
s of the page and get the id
of the first one (.attr()
returns the attribute of the first element in the set of elements it is used on)
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)
Instead of selecting all tr
s on the page with $('tr')
, you want to select the first ancestor of the clicked upon input
that is a tr
. Use .closest()
for this in the form $(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.
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
<!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>
Create a class in css name it .buttoncontact, add the class attribute to your buttons
function ClickedRow() {
$(document).on('click', '.buttoncontact', function () {
var row = $(this).parents('tr').attr('id');
var rowtext = $(this).closest('tr').text();
alert(row);
});
}
$('#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>
精彩评论