时间戳

首页 > 解决方案 > 按钮使用jQuery从表格行中获取数据

javascript - 按钮使用jQuery从表格行中获取数据

问题描述

我正在尝试使用 jQuery 从表行中获取数据。我正在尝试获取“b17dcat126”，但它没有返回任何内容。

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>

标签： javascriptjqueryjquery-events

解决方案

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

  1. 使用创建事件侦听器Jquery。
  2. 或者将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>

推荐阅读