CODEWITHSUNDEEP
javascriptjqueryjquery-events
minh nguyen
minh nguyen

Reputation: 79

Button get data from table row with jQuery

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>

Upvotes: 2

Views: 2018

Answers (3)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

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>

Upvotes: 2

Jeni
Jeni

Reputation: 430

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

Upvotes: 1

Sohail Ashraf
Sohail Ashraf

Reputation: 10579

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>

Upvotes: 1

Related Questions