按钮使用 jQuery 从 table 行获取数据

Question

我正在尝试使用 jQuery 从 table 行获取数据。我正在尝试获取 "b17dcat126" 但它返回了 none。

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>

Answer 1

函数内的this关键字指的是全局对象。你可以通过两种方式解决这个问题。

使用 Jquery 创建事件侦听器。
或者传递 this 关键字作为函数参数。

第一种方法：

$(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>

第二种方法：

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>

Answer 2

1.你用的是jQuery，所以你的代码可以简化太多。从按钮中删除 onclick 并直接执行：

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

工作片段：

$('.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. 如果将按钮对象传递给函数，您的代码也可以正常工作：

工作片段：

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>

Answer 3

将事件对象作为函数参数传递来解决这个问题。

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

按钮使用 jQuery 从 table 行获取数据

Button get data from table row with jQuery

javascript

jquery

jquery-events