时间戳

首页 > 解决方案 > 为什么表格内的按钮在单击时没有获得 td 的值？

javascript - 为什么表格内的按钮在单击时没有获得 td 的值？

问题描述

我填了一张表，实际上是一张jquery数据表。我通过循环将其附加到td创建了一个按钮。该按钮成功调用showmsg()函数，但无法从其所在行的特定td获取值。

它说undefined。

代码：

填充表格并在其中创建一个 EDIT 按钮的函数。

 function fillServicesGrid()
        {

            var url = '@Url.Action("GetServices")';
            var data = ''

            $.get(url, data, function (response) {

                $("#tblServices").html("");

                $.each(response, function (i, val) {
                    $("#tblServices").append($('<tr>').append($('<td id="tdServiceID">').html(val.ServiceID)).append($('<td>').html(val.ServiceName)).append($('<td>').html(val.ServicePrice)).append($('<button type="button" class="btn btn-primary btnEdit" onclick="showmsg();">Edit</button>')));
                });

            });

            $('#tblServices').DataTable();

            $('.sorting_asc, .sorting').addClass('datatable-headerrow');
            $('.paginate_button.current').addClass('pagination-buttons');
            $('.dataTables_filter, .dataTables_length').hide();

        }

btnEdit 调用的函数以获取 td #tdService 的文本

function showmsg()
{
    var serviceID = $(this).closest('tr').find('#tdServiceID').text();
    alert(serviceID);



    $("#ServiceName").val("Tester");
    $("#ServicePrice").val("Testing");
}

标签： javascriptjqueryhtmlhtml-tabledatatables

解决方案

由于您对 html 元素使用 Id，因此它们应该是唯一的。尝试在您的each函数中执行以下操作：

 $("#tblServices").append($('<tr>').append($('<td>').attr('id',"tdServiceID" + i).html(val.ServiceID)).append($('<td>').html(val.ServiceName)).append($('<td>').html(val.ServicePrice)).append($('<button type="button" class="btn btn-primary btnEdit" onclick="showmsg(\'' + i + '\');">Edit</button>')));

（将 Id 设置为 tdServiceID 附加迭代的索引）请注意，我们在 showmsg 函数中传递了“i”，现在可以变为

function showmsg(i)
{
    var serviceID = $('#tdServiceID'+i).text();
    alert(serviceID);

    $("#ServiceName").val("Tester");
    $("#ServicePrice").val("Testing");
}

它似乎正在工作jsFiddle

不确定该方法中的最后两行应该做什么

推荐阅读