Reputation: 151
Let's say I have code.
<tbody>
<tr id="a1">
<td>a2</td>
<td>a2</td>
</tr>
<tr id="a3">
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
If I want to get id value of the row I clicked.
<script>
$('tr').click(function(){
var a = //something values
alert(a);
});
</script>
What should I put inside something?
For another question(this is original problem of above question), when I have below code
<tbody>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tr>
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
And if I want second td value of the row I click which script code should I use?
Upvotes: 1
Views: 70
Reputation: 50664
To answer your first question. You can use this.id
to get the id
of the row you clicked on.
$('tr').click(function() {
var a = this.id;
alert(a);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="a1">
<td>a2</td>
<td>a2</td>
</tr>
<tr id="a3">
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
</table>
However, this isn't needed for your second question. To do this you can use:
this.children[1].textContent;
Here this
refers to the tr
you clicked on, and .children
is a collection of the td
elements. Thus targeting index 1
of this array will give you the second td
in the row.
See working example below:
$('tr').click(function() {
var a = this.children[1].textContent;
alert(a);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tr>
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
</table>
Upvotes: 0
Reputation: 13
Make sure that the code runs after document is loaded. The second td value is in this snippet, too:
$(document).ready(function(){
$('tr').click(function(){
var id = $(this).attr('id');
var secondTdValue = $(this).find('td').eq(1).text();
});
});
Upvotes: 0
Reputation: 1612
first question. you may use like this
<script>
$('tr').click(function(){
alert($(this).attr('id');
});
</script>
And second question
You may use
$('tr').click(function(){
alert($(this).find("td:nth-child(2)").html());
})
Upvotes: 0
Reputation: 68933
You can use this object from which you can get the id attribute:
$('tr').click(function(){
var a = this.id
alert(a);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="a1">
<td>a2</td>
<td>a2</td>
</tr>
<tr id="a3">
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
</table>
To get the second td you can use find()
and eq()
$('tr').click(function(){
var secondTD = $(this).find('td').eq(1).text();
alert(secondTD);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="a1">
<td>a2</td>
<td>a2</td>
</tr>
<tr id="a3">
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
</table>
Upvotes: 1