Javascript 如何在jquery中查找动态表的第二行并更改其值？

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

现在，我很困惑，我怎么能把那一行称为那张桌子的正行

到目前为止，我调用了

第二行的所有行数据

，更改反映在all表上。但我只希望我选择的切换表数据应该被更改

$('#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
            });

}

这$（'.myTable tr:nth child（2）返回所有表的第二行，这就是为什么我的更改会反映在所有动态表的第二行，但我只想选择单击了切换的表

和主动态行：

$.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>'

});

$。每个（用户、函数（索引、项）{
var$itemUser=''
+ ''
+ ''
+''+item.userName+''项目
+ ''               
+ ''
+ ''
+'用户名：'
+''+item.userName+''项目
+ ''
+ ''
+'用户状态：'
+“”+item.status+“”//这是打开/关闭切换时显示更改的位置
+ ''
+'用户切换：'
+ ''
+ ''
+  '': '> ';
$itemUser+=''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
});

---

我怎样才能做到这一点？有什么想法吗？谢谢

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

$('#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
            });

})

---

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

$('#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
            });

})

---

因为外部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
});

---

}

由于外部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
});

---

}

这很有效。谢谢你能给我一个建议吗？当切换按钮开始工作时，我看到所有的单元格值都被刷新了，我只想在我的状态单元格上显示这个。其他单元格值不变，但已刷新。我认为这不应该发生。我现在正在使用这个

.myTable tr:nth child（2）td:eq（1）.html（response）

这个工作很好。谢谢你能给我一个建议吗？当切换按钮开始工作时，我看到所有的单元格值都被刷新了，我只想在我的状态单元格上显示这个。其他单元格值不变，但已刷新。我认为这不应该发生。我现在使用的是

.myTable tr:nth child（2）td:eq（1）.html（response）