gpt4 book ai didi

javascript - jquery 设置的复选框和数字字段出现一瞬间,然后突然消失

转载 作者:行者123 更新时间:2023-11-28 06:26:10 25 4
gpt4 key购买 nike

我创建了一个简单的 html 文件,它发出 ajax 请求以从数据库表中获取数据。

某些列不通过ajax更新。它们是在此页面中手动输入的。当每个 ajax 调用刷新页面数据时,我编写了 storeVars()putVars() 来在刷新之前存储输入值并设置分别刷新后存储的值。但这不起作用:(

JavaScript:

function createList() {
$.ajax({
type: "POST",
url: "fetch_registered_list.php?event_id=1",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$('#table_data tr').not(':first').remove();
if (data != '' || data != undefined || data != null) {
var html = '';
$.each(data, function(i, item) {
html += "<tr><td>" + data[i].sno + "</td>" + "<td>" + data[i].name + "</td>" + "<td>" + data[i].email + "</td>" + "<td>" + data[i].phone + "</td>" + "<td><input class='check' name='" + i +
"' type='checkbox'/></td>" + "<td><input class='score' name='" + data[i].email + "' type='number'/></td></tr>"
})
$('#table_data tr').first().after(html);
}

}
});
}



$(document).ready(function() {
createList();
setInterval(function() {
storeVars();
createList();
putVars();
}, 5000);
});

var checkboxes = new Array();
var scores = new Array();

function storeVars() {
$('#table_data tbody tr:not(:first-child) td:nth-child(5)').each(function() {
checkboxes.push($(this).find('.check').is(':checked'));
});
$('#table_data tbody tr:not(:first-child) td:nth-child(6)').each(function() {
scores.push($(this).find('.score').val());
});
}

function putVars() {
$('#table_data tbody tr:not(:first-child) td:nth-child(5)').each(function() {
$(this).find('.check').prop('checked', true);
});
$('#table_data tbody tr:not(:first-child) td:nth-child(6)').each(function() {
$(this).find('.score').val('44');
});
}

HTML:

<body>
<div id="wrapper">
<div id="heading">
<h1>Event One</h1>
</div>
<form method="post">
<table id="table_data">
<tr>
<td><strong>S.no.</strong></td>
<td><strong>Name</strong></td>
<td><strong>Email</strong></td>
<td><strong>Phone</strong></td>
<td><strong>Participated</strong></td>
<td><strong>Score</strong></td>
</tr>
</table>
<footer>
<input id="button" type="button" name="submit" value="Announce Winners" />
</footer>
</form>
</div>
</body>

最佳答案

首先,您必须在每个新存储处重置数组,否则您的数组将包含指数级的新条目。其次,您的 putVars() 函数不正确,它必须检查每个数组的值,以便在相应的输入中重新创建正确的数据。

因此,请更新您的文档就绪函数来声明您的两个数组。

$(document).ready(function() {
var checkboxes,
scores;

createList();
setInterval(function() {
storeVars();
createList();
putVars();
}, 5000);
});

然后在每次存储时重置两个阵列。

function storeVars() {
checkboxes = new Array();
scores = new Array();

$('#table_data tbody tr:not(:first-child) td:nth-child(5)').each(function() {
checkboxes.push($(this).find('.check').is(':checked'));
});
$('#table_data tbody tr:not(:first-child) td:nth-child(6)').each(function() {
scores.push($(this).find('.score').val());
});
}

最后像这样更新你的 putVars() 函数。

function putVars() {
$('#table_data tbody tr:not(:first-child) td:nth-child(5)').each(function(index) {
if(checkboxes[index] == true) {
$(this).find('.check').prop('checked', true);
}
else {
$(this).find('.check').prop('checked', false);
}
});
$('#table_data tbody tr:not(:first-child) td:nth-child(6)').each(function(index) {
$(this).find('.score').val(scores[index]);
});
}

working fiddle

关于javascript - jquery 设置的复选框和数字字段出现一瞬间,然后突然消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35119755/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com