How can i find data-id if tag A in table?

Question

I have a simple table :

<table>
    <tr>
        <td>ID</td>
        <td><a href="http:link" class="btn btn-default" data-action="view" 
 data-id="44">View</a>
        </td>
    </tr>
</table>

I would like after click get a data-action and data-id i tried

$('#visit-list-table tr').on('click', function() {
    var test = $(this).closest("tr");
    console.log(test[0].data('id'));

    var test = $(this).closest("tr").find('a').attr('id');
    console.log(test);
});

But without result. How can I get this data?

aaaa sorry $('#visit-list-table tr').on('click', function() { — Wraith, Oct 02 '18 at 10:31
none of the elements in your HTML have attribute 'id'. You could try to get the attribute by its full name: ...`.attr('data-id')` — Dharman, Oct 02 '18 at 10:32
How about `$('#visit-list-table tr').on('click', function() { console.log($(this).find("a").data('id')); });` — ssc-hrep3, Oct 02 '18 at 10:36

Nirali · Accepted Answer · 2018-11-19T05:22:10.710

Check below snippet. You should use data attribute like

$(this).closest("tr").find('a').data('id')

Or

$(this).closest("tr").find('a').attr('data-id')

Both will give same result. And i added id 'visit-list-table' to the table.

$('#visit-list-table tr').on('click', function() {
 
  var test = $(this).closest("tr").find('a').data('id');
  console.log(test);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="visit-list-table">
    <tr>
        <td>ID</td>
        <td><a href="http:link" class="btn btn-default" data-action="view" 
 data-id="44">View</a>
        </td>
    </tr>
</table>

`$(this)` in event listener is `tr` but you trying to use `closest('tr')` that is additional — Mohammad, Oct 02 '18 at 10:38

score 0 · Answer 2 · answered Oct 02 '18 at 10:36

add id #visit-list-table to element. and you can do $(this).find('a').attr('data-id'); Here attr('data-id') instead of attr('id') because there is no attribute in a tag with id

$('#visit-list-table tr').on('click', function() {
    var test = $(this).find('a').attr('data-id');
    console.log(test);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="visit-list-table">
    <tr>
        <td>ID</td>
        <td><a class="btn btn-default" data-action="view" 
 data-id="44">View</a>
        </td>
    </tr>
</table>

How can i find data-id if tag A in table?

2 Answers2