[英]How to find the second row of a dynamic table and change its value in jquery?
I have some dynamic table data which created based on how many users I have in my backend.我有一些动态表数据,这些数据是根据我后端的用户数量创建的。 That's just a simple fetch state.
这只是一个简单的获取状态。 But, I'm facing an issue while using a toggle button on that dynamic html.
但是,我在该动态 html 上使用切换按钮时遇到了问题。 My toggle button motivation is: if an user turn it ON then, it will change the status as "ACTVIE", if turn off, then will say "Inactive".
我的切换按钮动机是:如果用户打开它,它会将状态更改为“ACTVIE”,如果关闭,则会显示“非活动”。 This is working fine and changes are also updated in database while toggling.
这工作正常,切换时数据库中的更改也会更新。 But the states are not changing just at that moment unless I refresh the page.
但是,除非我刷新页面,否则状态不会在那一刻发生变化。
Now, I'm confused How can I call that exact row of that table.现在,我很困惑如何调用该表的确切行。
What I've done so far I called all the row data of second row
, and the changes are reflected on the all table.到目前为止,我所做的就是调用
second row
所有行数据,并将更改反映在所有表上。 But I want just my selected toggle tables data should be changed.但我只想更改我选择的切换表数据。
$('#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)') is returning all the 2nd row of all tables, that's why my chagnes are reflected on all the 2nd row of all dynamic tables, but I want to select only that table in which toggle was clicked这个$('.myTable tr:nth-child(2)')正在返回所有表的所有第二行,这就是为什么我的 chagnes 反映在所有动态表的所有第二行上,但我只想选择那个表在其中单击切换
And the main dynamic row:和主要的动态行:
$.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>'
});
How can I achieve this?我怎样才能做到这一点? Any idea?
任何的想法? Thanks
谢谢
Store a reference to the userDiv instance so you can look for the table row inside it when the success callback runs存储对 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
});
})
Since your outside-div contains the user-id you could call it with a attribute-selector由于您的外部 div 包含用户 ID,您可以使用属性选择器调用它
Like this:像这样:
$('#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
});
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.