Button get data from table row with jQuery

user_12668443 0
Viewed 789

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>

jquery-events jquery javascript
3 Answers

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>

user_42483280

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

  1. Create the event listener using Jquery.
  2. 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>

user_41489020

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());
}
user_42469860
Related