I want to get value of first column row on eack href click in HTML table

Question

I want to get the first column row value on each row href click EDIT . for eg if i click on first row href then i should get alert with its first column row value .

$(document).ready(function () {
        var jsonData = [{
            id: 'A01',
            name: 'Fadhly'
        }, {
            id: 'A02',
            name: 'Permata'
        }, {
            id: 'A03',
            name: 'Haura'
        }, {
            id: 'A04',
            name: 'Aira'
        }];

        $.each(jsonData, function (key, val) {
            var tr = '<tr>';
            tr += '<td>' + (key + 1) + '</td>';
            tr += '<td>' + val.id + '</td>';
            tr += '<td>' + val.name + '</td>';
            tr += '<td><a href="#menu1">Edit</a</td>';
            tr += '</tr>';
            $('tbody').append(tr);
        });

My HTML Code

<script           src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1" width="100%">
<thead>
<tr>
  <th>#</th>
  <th>Id</th>
  <th>Name</th>
  <th>Action</th>
</tr>
</thead>

<tbody>
</tbody>
</table>

In above table if i click on first row edit href then it should print id in alert box. i dont want on button click only href click . — M J, Feb 17 '17 at 15:51
That's not [JSON](http://www.json.org/) -> [What is the difference between JSON and Object Literal Notation?](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation) — Andreas, Feb 17 '17 at 15:51
PLease check my updated code and please help to get value on each row href click . — M J, Feb 17 '17 at 15:57

Alexander Staroselsky · Answer 1 · 2017-02-17T16:56:16.847

1

Given a generated HTML structure as follows with n rows being dynamically added to <tbody>:

<table border="1" width="100%">
  <thead>
    <tr>
      <th>#</th>
      <th>Id</th>
      <th>Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>
        <a>Edit</a>
      </td>
    </tr>
    <tr><!-- n dynamically generated rows --></tr>
  </tbody>
</table>

You could use the following jQuery to execute alert() of the text within the first column of the respective row using click handler with a context provided:

$(document).ready(function(){
    $('tbody').on('click', 'a', function(){
        var value = $(this).closest('tr').find('td').first().text();
        alert(value);
    });
});

Here is a jsfiddle demonstrating the functionality. It demonstrates the value of the first column being alerted as well as shows dynamic/added rows via click event executing the event on <a> click. This is because the <a> elements aren't directly targeted, they are supplied as context to permanent DOM element such as which won't be added or removed.

Update

If you need to grab other columns you could structure the jQuery query using eq() to grab a zero (0) based index. For example if you need the second column you could:

// first column
var value = $(this).closest('tr').find('td').eq(0).text();

// second column
var value = $(this).closest('tr').find('td').eq(1).text();

// third column
var value = $(this).closest('tr').find('td').eq(2).text();

Hopefully that helps!

edited Feb 17 '17 at 16:56

answered Feb 17 '17 at 15:57

Alexander Staroselsky

37,209
15
79
91

I am creating dynamic table on page load so this code will not work i guess . – M J Feb 17 '17 at 16:00
How the `on('click')` handler is set up allows for dynamic elements to be added and have the event listener attached. If `` was being targeted for the 'on()', it would fail, but targeting `` (or a similar permanent DOM element) and provided `` context, it will successfully attach as you add more items. I've updated the jsfiddle showing a new row being added and the event successfully executing. Thanks! – Alexander Staroselsky Feb 17 '17 at 16:02
I dont want to add row but i m fetching json from servlet and the on page load i am creating a html table dynamically using above code and now i want the first column row value on the row edit is clicked . how can i get that value on each efit href click please help.. – M J Feb 17 '17 at 16:19
The adding of the row in the jsfiddle is simply showing that event handlers can be attached to elements dynamically added to the table. My point wasn't that you **need** to add rows to the table via a button click, it's fine you are adding them looping through JSON. The fiddle demonstrates that even for dynamically added rows, you can use that jQuery to click on an `` and alert the text within the first `` of that respective ``. If this isn't what you are looking for, you may need to clarify question with examples of what the rows come out to and what **exact value** you need alert – Alexander Staroselsky Feb 17 '17 at 16:24
In the example, the first column is a `1` of the first ``. When you click on that ``'s ``, it alerts `1`. If the text within that first `` was instead `foo`, it would alert `foo`. – Alexander Staroselsky Feb 17 '17 at 16:26
Thnx for the explaination and for answer also . Both you and yunus gave right answer i m confused to whose answer i should accept and tick right – M J Feb 17 '17 at 16:46
No problem, glad to help. Choose whichever answer seems easier for you maintain and understand. I personally do everything possible to avoid string concatenation unless absolutely necessary for building event functionality. – Alexander Staroselsky Feb 17 '17 at 16:58

score 0 · Answer 2 · answered Feb 17 '17 at 15:58

    $.each(jsonData, function (key, val) {
        var tr = '<tr>';
        tr += '<td>' + (key + 1) + '</td>';
        tr += '<td>' + val.id + '</td>';
        tr += '<td>' + val.name + '</td>';
        tr += '<td><button class="delete" data-key="' + (key + 1) + '" onclick="alert('+(key+1)+')"><a href="#menu1">Edit</a></button></td>';
        tr += '</tr>';
        $('tbody').append(tr);
    });

Simply add it to the onclick attribute...

i dont on button click i mentioned above – M J Feb 17 '17 at 16:07 — M J, Feb 17 '17 at 16:07

Inus Saha · Accepted Answer · 2017-02-17T16:28:05.737

0

check this out.

this works perfectly

$(document).ready(function () {
        var jsonData = [{
            id: 'A01',
            name: 'Fadhly'
        }, {
            id: 'A02',
            name: 'Permata'
        }, {
            id: 'A03',
            name: 'Haura'
        }, {
            id: 'A04',
            name: 'Aira'
        }];

        $.each(jsonData, function (key, val) {
            var tr = '<tr>';
            tr += '<td>' + (key + 1) + '</td>';
            tr += '<td>' + val.id + '</td>';
            tr += '<td>' + val.name + '</td>';
            tr += '<td><button class="delete" data-key="' + (key + 1) + '"><a href="#menu1">Edit</a></button></td>';
            tr += '</tr>';
            $('tbody').append(tr);
        });

         $('tbody .delete a').click(function(){
             alert($(this).closest('tr').find('td:first-child').text());
         });
});

here is the updated jsfiddle link. check it out. https://jsfiddle.net/86n7qkpe/

edited Feb 17 '17 at 16:28

answered Feb 17 '17 at 16:01

Inus Saha

1,918
11
17

added jsfiddle link, check that out. – Inus Saha Feb 17 '17 at 16:11
I removed first column from hmtl table and then i should get id but still it is giving me 1 as output . but it should give me the value of first column row – M J Feb 17 '17 at 16:16
Thnx for the explaination and for answer also . Both you and Alexander gave right answer i m confused to whose answer i should accept and tick right – M J Feb 17 '17 at 16:46
I understand that, but thank you very much for accepting mine :) – Inus Saha Feb 17 '17 at 17:01
How can i add pagination to above html table . – M J Feb 23 '17 at 06:17

I want to get value of first column row on eack href click in HTML table

3 Answers3