How to get row id in the next example

Question

I need to show the row id of the clicked anchor element in showId():

function showId() {
    var id = $(this).attr('id'); //This return undefined
            
    alert(id);
    return false;
}

<table>
    <thead>
     <tr>
            <th>header1</th> 
            <th>header2</th>    
        </tr>
    </thead>
    <tbody>
        <tr id=1>
            <td><a href="" onclick="return showId()">row1 td1</td> 
            <td><a href="" onclick="return showId()">row1 td2</td>    
        </tr>
        <tr id=2>
            <td><a href="" onclick="return showId()">row2 td1</td> 
            <td><a href="" onclick="return showId()">row2 td2</td>    
        </tr>
        <tr id=3>
            <td><a href="" onclick="return showId()">row3 td1</td> 
            <td><a href="" onclick="return showId()">row3 td2</td>    
        </tr>
    </tbody>
</table>

So, you need the clicked on item's parent's parent's id. Google DOM traversal. Also, the value of the id should be in quotes (`id="1"`) — devlin carnate, Apr 28 '20 at 20:21
None of your links are closed. Also, avoid inline event handlers — j08691, Apr 28 '20 at 20:22
Use closet with tag name, instead of parent.parent it is not the right way as if any label of element get changed code will break. function showId(item) { var id = $(item).closest('tr').attr('id'); alert(id); return false; } — Bhanu Pratap, Apr 28 '20 at 20:52

Triby · Accepted Answer · 2020-04-28T20:31:26.333

You need to send clicked element as parameter, so the function have an element to start.

Start from: item
First parent node: td = item.parentNode
Second parent node: tr = item.parentNode.parentNode

function showId(item) {
    var id = item.parentNode.parentNode.id;
            
    alert(id);
    return false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
    <tr>
        <th>header1</th> 
        <th>header2</th>    
    </tr>
</thead>
<tbody>
    <tr id="1">
        <td><a href="" onclick="return showId(this)">row1 td1</td> 
        <td><a href="" onclick="return showId(this)">row1 td2</td>    
    </tr>
    <tr id="2">
        <td><a href="" onclick="return showId(this)">row2 td1</td> 
        <td><a href="" onclick="return showId(this)">row2 td2</td>    
    </tr>
    <tr id="3">
        <td><a href="" onclick="return showId(this)">row3 td1</td> 
        <td><a href="" onclick="return showId(this)">row3 td2</td>    
    </tr>
</tbody>
</table>

$(item).closest('tr').attr('id'); is better than item.parentNode.parentNode.id; because of item.parentNode.parentNode will break on change of items label. — Bhanu Pratap, Apr 28 '20 at 20:55

score 0 · Answer 2 · edited Apr 28 '20 at 20:33

0

In your code, $(this) refers to your anchor tag. However, the id attribute is defined in the tr tag.

You need to 'move up' the tree to the parent of the parent element. To do this, try

var id = $(this).parent.parent.attr('id');

edited Apr 28 '20 at 20:33

Roberto Caboni

7,252
10
25
39

answered Apr 28 '20 at 20:24

Scott Goble

16

score 0 · Answer 3 · answered Apr 28 '20 at 20:24

Attention, ID attributes should be in "". like id="1"

function showId(sender) {
var id = $(sender).parent().attr('id'); 

alert(id);
return false;
}



<table>
<thead>
    <tr>
        <th>header1</th> 
        <th>header2</th>             
    </tr>
</thead>
<tbody>
    <tr id="1"> //Attention ID in "1"
        <td><a href="" onclick="return showId(this)">row1 td1</td> 
        <td><a href="" onclick="return showId(this)">row1 td2</td>           
    </tr>
    <tr id="2">
        <td><a href="" onclick="return showId(this)">row2 td1</td> 
        <td><a href="" onclick="return showId(this)">row2 td2</td>           
    </tr>
    <tr id="3">
        <td><a href="" onclick="return showId(this)">row3 td1</td> 
        <td><a href="" onclick="return showId(this)">row3 td2</td>           
    </tr>
</tbody>

How to get row id in the next example

3 Answers3