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>

最佳答案

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>

关于javascript - 按钮使用jQuery从表行获取数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60700607/