从表行中获取值，请单击jQuery

Question

我正在尝试从按钮单击表中获取行值。这就是我创建表的方式：

<tbody>
    @foreach (var item in Model)
    {
        ViewBag.AccountID = item.AccountId.ToString();
        if (item.Items != null)
        {
            foreach (var itemOnList in item.Items)
            {
                <tr>
                    <td>@Html.DisplayFor(model => itemOnList.ItemId)</td>
                    <td data-itemname="@itemOnList.ItemName">@Html.EditorFor(model => itemOnList.ItemName)</td>
                    <td data-serialnumber="@itemOnList.SerialNumber">@Html.EditorFor(model => itemOnList.SerialNumber)</td>
                    <td data-brandname="@itemOnList.BrandName">@Html.EditorFor(model => itemOnList.BrandName)</td>
                    <td data-quantity="@itemOnList.Quantity">@Html.EditorFor(model => itemOnList.Quantity)</td>
                    <td data-description="@itemOnList.Description">@Html.EditorFor(model => itemOnList.Description)</td>
                    <td>
                        <a href="javascript:void(0);"  data-itemid="@itemOnList.ItemId" class="btn_edit">Edit |</a>
                        <a href="javascript:void(0);" data-itemid="@itemOnList.ItemId" class="btn_delete">Delete</a>
                    </td>
                </tr>
            }
        }
    }
</tbody>

这就是我尝试从表中获取值的方式：

$('#tbl_items').on('click', '.btn_edit', function () {
    var self = $(this);
    alert($(this).data('serialnumber') + " " + $(this).data('description'));
});

，但它不会提醒我值。

Answer 1

问题是因为data-serialnumber和data-description属性不在您单击的a元素上，它们在同一行中的td元素上。

要解决此问题，您可以使用closest()获取最近的tr，然后找到td并获取data属性值，例如：

$('#tbl_items').on('click', '.btn_edit', function () {
    var $tr = $(this).closest('tr');
    var serialNumber = $tr.find('td[data-serialnumber]').data('serialnumber');
    var description = $tr.find('td[data-description]').data('description');
    alert(serialNumber + " " + description);
});