按钮使用jquery从表行中获取数据

Question

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

HTML

<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

function updatedata(){
            var tr = $(this).parents("tr");
            var id = tr.find('.id').text();  
            alert(id);
        }

Answer 1

函数内的this关键字引用了全局对象。您必须将this作为函数参数传递，或使用Jquery创建事件侦听器。

示例：

$("<selector>").click(<function>);

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

由于您使用的是jQuery，因此无需在其中使用onclick。做：

$('.btn-warning').click(function(){

  var id = $(this).closest('tr.row').find('.id').text();  
  alert(id);
});