jQuery - 在加载 ajax 发布成功的新数据之前清除 HTML 表

Question

<select id="group" name="group" onchange="generateList(this.value);">
     <?php foreach ($userGroup as $item) { ?>
        <option value="<?= $item->appsGroupId ?>"><?= $item->userGroupName ?></option>
     <?php } ?>
</select>

这是一个下拉列表和更改事件，我正在调用以下 javascript 函数，该函数将 ajax 发布到 PHP 函数

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 发布成功时（调用返回 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>

现在的问题是，当我更改下拉列表时，表格正在填充新数据，但旧数据仍然存在。在下拉更改我想要的是清除 HTML 表中的旧数据并在 ajax 发布后加载新数据。

Answer 1

好的。以这种方式操作 DOM 并不是最好的方式：

  success: function(data) {
                 $('#assignPackage').hide();
                console.log(packages); console.log(group);           
                ko.applyBindings({ 
                        records : JSON.parse(data.packages)
                    });
                  $('#assignPackage').show();
            },

如果表格数据很长，我建议你使用动态插件（如 jquery 数据表）。

Answer 2

尝试在成功函数中调用ko.applyBindings之前放置$('#packageTable tr').remove();：

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);
        }
    });
};

Answer 3

根据您的评论，我认为您需要做的就是在设置新值之前清除所有文本。

在调用 ko.applyBindings 之前调用它：

$("#packageTable").find("td").html('');

这将清除 table#packageTable 下所有 td 的所有文本（也包括所有子元素）。

Answer 4

您正在使用 Knockout 绑定 Json。

你能发布你的淘汰码吗？

或用于身体负荷

 $(document).ready(function(){
      var records = {packageId:'',packageName'' }; 
       ko.applyBindings(records);
 });

在 ajax Success 事件上只需使用

 records = JSON.parse(data.packages);

其中 records 是 javascript 的全局变量。