Button get data from table row with jQuery

Question

I'm trying to get the data from the table row using jQuery. I'm trying to get "b17dcat126" but it returned none instead.

function updatedata() {
  var tr = $(this).parents("tr");
  var id = tr.find('.id').text();
  alert(id);
}

<tbody id="list">
  <tr class='row'>
    <td class='id'>b17dcat126</td>
    <td class='name'>Nguyễn Nhật Minh</td>
    <td class='phone'>010313234</td>
    <td class='sex'>Nam</td>
    <td>
      <button class='btn btn-danger' onclick='deletefunc(15)' data-id='15'>Xoá</button>
      <button class='btn btn-warning' data-toggle='modal' onclick='updatedata()' data-target='#update'>Sửa</button>
    </td>
  </tr>
</tbody>

Death-is-the-real-truth · Accepted Answer · 2020-04-02 09:13:52Z

1. You are using jQuery, so you can simplify your code too much. remove onclick from button and directly do:

$('.btn-warning').click(function(){
  var id = $(this).closest('tr').find('.id').text();  
  alert(id);
});

Working snippet:

$('.btn-warning').click(function() {
  var ids = $(this).closest('tr').find('.id').text();
  alert(ids);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="list">
  <tr class='row'>
    <td class='id'>b17dcat126</td>
    <td class='name'>Nguyễn Nhật Minh</td>
    <td class='phone'>010313234</td>
    <td class='sex'>Nam</td>
    <td>
      <button class='btn btn-warning' data-toggle='modal' data-target='#update'>Sửa</button>
    </td>
  </tr>
</tbody>
</table>

2. Your code will work as well, if you pass button object to the function:

Working snippet:

function updatedata(element) {
    var id = $(element).closest("tr").find('.id').text();
    alert(id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
        <tbody id="list">
            <tr class='row'>
                <td class='id'>b17dcat126</td>
                <td class='name'>Nguyễn Nhật Minh</td>
                <td class='phone'>010313234</td>
                <td class='sex'>Nam</td>
                <td>
                    <button class='btn btn-warning' data-toggle='modal' onclick='updatedata(this)' data-target='#update'>Sửa</button>
                </td>
            </tr>
        </tbody>
    </table>

Sohail Ashraf · Accepted Answer · 2020-03-16 05:29:04Z

The this keyword inside the function is referring to the global object. You could solve this by two way.

Create the event listener using Jquery.
Or pass the this keyword as the function argument.

First approach:

$(document).ready(function() {
    $(".updateBtn").click(function() {
        var tr = $(this).parents("tr");
        var id = tr.find('.id').text();
        alert(id);
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
        <tbody id="list">
            <tr class='row'>
                <td class='id'>b17dcat126</td>
                <td class='name'>Nguyễn Nhật Minh</td>
                <td class='phone'>010313234</td>
                <td class='sex'>Nam</td>
                <td>
                    <button class='btn btn-warning updateBtn' data-toggle='modal' data-target='#update'>Sửa</button>
                </td>
            </tr>
        </tbody>
    </table>

Second approach:

function updatedata(current) {
    var tr = $(current).parents("tr");
    var id = tr.find('.id').text();
    alert(id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
        <tbody id="list">
            <tr class='row'>
                <td class='id'>b17dcat126</td>
                <td class='name'>Nguyễn Nhật Minh</td>
                <td class='phone'>010313234</td>
                <td class='sex'>Nam</td>
                <td>
                  
                    <button class='btn btn-warning' data-toggle='modal' onclick='updatedata(this)' data-target='#update'>Sửa</button>
                </td>
            </tr>
        </tbody>
    </table>

Jeni · Accepted Answer · 2020-03-16 08:17:02Z

1

Pass event object as function argument to solve this problem.

In HTML,

<button class='btn btn-warning' data-toggle='modal' onclick='updatedata(event)' data-target='#update'>Sửa</button>

function updatedata(e) {     
  alert($(e.target).parents('tr').find('td.id').text());
}

answered Mar 16, 2020 at 8:17

Jeni

4303 silver badges13 bronze badges

Collectives™ on Stack Overflow

Button get data from table row with jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related