I have a table in which each tr
is a record and each td
is a column. When I use the click
event and click on tr
, I need both tr
id and the 6th column td
id.
Both tr
and td
id should be assigned to a variable.
How to do this with a jQuery selector?
Is this correct?
$(‘tr td).(‘click’, function (
{
});
Any help would be be appreciated. I tried this too:
$('tr td:nth-ch开发者_Go百科ild(5)')
... but it didn't work.
HTML:
<table border="1">
<tr id="row1">
<td id="a1">A1</td>
<td id="b1">B1</td>
<td id="c1">C1</td>
<td id="d1">D1</td>
<td id="e1">E1</td>
<td id="f1" class="sixth">F1</td>
</tr>
<tr id="row2">
<td id="a2">A2</td>
<td id="b2">B2</td>
<td id="c2">C2</td>
<td id="d2">D2</td>
<td id="e2">E2</td>
<td id="f2" class="sixth">F2</td>
</tr>
<tr id="row3">
<td id="a3">A3</td>
<td id="b3">B3</td>
<td id="c3">C3</td>
<td id="d3">D3</td>
<td id="e3">E3</td>
<td id="f3"class="sixth">F3</td>
</tr>
</table>
jQuery:
$(document).ready(function(){
$('tr').click(function(){
rowID = $(this)[0].id;
celID = $(this).children('td:eq(5)')[0].id;
alert('Row '+rowID+'\nCell '+celID);
});
});
See jsFiddle. (NOTE: The class="sixth"
but was just for debugging and display purposes in jsFiddle.
NOTE: Revised solution after question was clarified by OP: jsFiddle
$(document).ready(function(){
$('td:nth-child(6)').click(function(){
alert( $(this)[0].id );
});
}):
var row = $(this).closest('tr');
var cell = row.find('td:nth-child(6)');
Note that :nth-child() is 1-based, not 0-based, so use (6).
I'm posting on an iPad which doesn't lend itself to code-snippets, else I'd give you a more complete solution!
精彩评论