为啥表格内的按钮在单击时没有获得 td 的值？

Posted 2023-05-09

【中文标题】为啥表格内的按钮在单击时没有获得 td 的值？

【英文标题】：Why don't the button inside the table is getting the value of a td upon clicking?为什么表格内的按钮在单击时没有获得 td 的值？

【发布时间】：2018-10-08 02:56:44

【问题描述】：

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

上面写着未定义。

代码：

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

 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");

【问题讨论】：

这段代码是在 razor 还是 js 文件中？ id是唯一的吗？什么叫 showmsg - this 你认为它是什么？请创建一个minimal reproducible example

当它应用于多个 DOM 元素时，你不应该使用 ids。尝试将

更改为 并在函数 showmsg 中， var serviceID = $(this).closest('tr').find('.tdServiceID').text( );

@Amit：不工作

@Pete：它在剃须刀上，在本地。是的，id 是唯一的，

我一直在努力解决，但没办法，帮帮我

【参考方案1】：

由于您为 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

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

【讨论】：

非常感谢，它有效，但我仍然不明白如何？ :P

什么是你不明白的？也许我们可以继续聊天？