jQuery -在ajax post成功加载新数据之前清除HTML表
jQuery -在ajax post成功加载新数据之前清除HTML表
提问于 2015-03-08 00:12:17
<select id="group" name="group" onchange="generateList(this.value);">
<?php foreach ($userGroup as $item) { ?>
<option value="<?= $item->appsGroupId ?>"><?= $item->userGroupName ?></option>
<?php } ?>
</select>这是一个下拉列表，在发生更改事件时，我将调用以下javascript函数，该函数将启动到PHP函数的ajax post
function generateList(id)
{
var packages = "";
var groupId = {"group_id" : id};
$.ajax({
type: "POST",
data: groupId,
url: "<?= base_url() ?>apps_users/seeGroup",
dataType: "json",
success: function(data) {
packages = jQuery.parseJSON(data.packages);
var vm = function() {
var self = this;
self.records = ko.observableArray(packages);
$.each(self.records(), function(i, record){
record.packageId = record.packageId;
record.packageName = record.packageName;
})
}
ko.applyBindings(new vm());
},
error: function(error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
};以及ajax post成功时(调用返回json响应的PHP函数)。通过响应，我填充了一个简单的HTML表，如下所示：
<div class="container" id="assignPackage">
<table class="table table-striped table-bordered" id="packageTable">
<thead>
<tr>
<th>ID</th>
<th>Package Name</th>
</tr>
</thead>
<tbody data-bind="foreach: records">
<tr>
<td data-bind="text:packageId" > </td>
<td data-bind="text:packageName"> </td>
</tr>
</tbody>
</table>
<br><br>
</div>现在的问题是，当我更改下拉列表时，表中填充了新数据，但旧数据仍然存在。在dropdown change上，我想要的是清除HTML表中的旧数据，并在ajax post之后加载新数据。
回答 4
Stack Overflow用户
发布于 2015-03-08 02:55:16
好的。以这种方式操作DOM不是最好的方法：
success: function(data) {
$('#assignPackage').hide();
console.log(packages); console.log(group);
ko.applyBindings({
records : JSON.parse(data.packages)
});
$('#assignPackage').show();
},如果表数据非常长，我建议您使用动态插件(如jquery datatables)。
Stack Overflow用户
发布于 2015-03-08 02:57:50
尝试在成功函数中将$('#packageTable tr').remove();放在调用ko.applyBindings之前：
function generateList(id)
{
var groupId = {"group_id" : id};
$.ajax({
type: "POST",
data: groupId,
url: "<?= base_url() ?>apps_users/seeGroup",
dataType: "json",
success: function(data) {
console.log(packages); console.log(group);
$('#packageTable tr').remove();
ko.applyBindings({
records : JSON.parse(data.packages)
});
},
error: function(error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
};Stack Overflow用户
发布于 2015-03-08 12:58:56
根据您的评论，我认为您需要做的就是在设置新值之前清除中的所有文本。
在调用ko.applyBindings之前调用以下代码：
$("#packageTable").find("td").html('');这将清除table#packageTable下所有td的所有文本(以及所有子元素)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28916918
复制相关文章
相似问题
腾讯云开发者
