如何找到动态 table 的第二行并更改其在 jquery 中的值？

Question

我有一些 动态 table 数据，这些数据是根据我后端的用户数量创建的。这只是一个简单的获取状态。但是，我在动态 html 上使用切换按钮时遇到问题。我的切换按钮动机是：如果用户打开它，它将状态更改为“ACTVIE”，如果关闭，则会显示“Inactive”。这工作正常，并且在切换时也会在数据库中更新更改。但是除非我刷新页面，否则状态不会在那一刻发生变化。

现在，我很困惑如何调用 table 的那一行。

到目前为止，我调用了 second row 的所有行数据，并且更改反映在所有 table 上。但我只想更改我的 selected toggle tables 数据。

$('#dynamicUserDiv').on("change", "input.userStatus", function () {
          var userId = $(this).closest("div.userDiv").attr("userId");
          var isChecked = $(this).is(":checked");
            $.ajax({
                type: "GET",
                url: "/status",
                data: {
                    userId: userId,
                    isActive: isChecked
                },
                success: function (response) {
                  console.log(response) // this response return Active or Inactive based on toggle switch
                  $('.myTable tr:nth-child(2)').html(response);

                },
                async: true
            });

}

this $('.myTable tr:nth-child(2)') 返回所有 table 的所有第二行，这就是为什么我的 chagnes 反映在所有动态 table 的所有第二行， 但我只想 select table 在其中单击切换

主要动态行：

$.each(user, function (index, item) {

var $itemUser = '<div class="col-md-6 userDiv" userid="' + item.id + '">'
                + '<div class="dash-widget dash-widget5">'
                + '<div class="dash-widget-info">'
                + '<div class="innerTableHeaderFile"><label class="">' + item.userName + '</label></div>'
                + '<table class="myTable">'               
                + '<tbody>'
                + '<tr>'
                + '<td>User Name:</td>'
                + '<td>' + item.userName + '</td>'
                + '</tr>'
                + '<tr>'
                + '<td>User Status:</td>'
                + '<td>' + item.status + '</td>'  // this is where I want to show the changes when toggle is on/off
                + '</tr>'
                + '<td>User Toggle:</td>'
                + '<td>'
                + '<label class="switch">'
                +  '<input class = "userStatus" type="checkbox" ';
                $itemUser += item.status == "ACTIVE" ? 'checked >': '> ';
                $itemUser += '<span class="slider round"></span>'
                + '</label>'
                + '</tr>'
                + '</tbody>'
                + '</table>'
                + '</div>'
                + '</div>'
                + '</div>'

});

我怎样才能做到这一点？任何的想法？谢谢

Answer 1

存储对 userDiv 实例的引用，以便您可以在成功回调运行时在其中查找 table 行

$('#dynamicUserDiv').on("change", "input.userStatus", function () {
          // store reference to parent that can be used in success callback
          var $userDiv = $(this).closest("div.userDiv");          
          var userId = $userDiv.attr("userId");
          var isChecked = $(this).is(":checked");
            $.ajax({
               // ...
                success: function (response) {
                  // find the table within current userDiv
                  $userDiv.find('.myTable tr:nth-child(2)').html(response);

                },
                async: true// redundant since this is default
            });

})

Answer 2

因为你的 outside-div 包含你可以用属性选择器调用它的用户 ID

像这样：

$('#dynamicUserDiv').on("change", "input.userStatus", function () {
var userId = $(this).closest("div.userDiv").attr("userId");
var isChecked = $(this).is(":checked");
$.ajax({
    type: "GET",
    url: "/status",
    data: {
        userId: userId,
        isActive: isChecked
    },
    success: function (response) {
        console.log(response) // this response return Active or Inactive based on toggle switch
        $('div[userid="'+userId+'"] .myTable tr:nth-child(2)').html(response);

    },
    async: true
});

}

如何找到动态 table 的第二行并更改其在 jquery 中的值？

How to find the second row of a dynamic table and change its value in jquery?

html

javascript

jquery

html-table

toggle