javascript – Jquery将新数据附加到旧数据有重复的问题

如何在不重复我的表的情况下向旧的数据添加新数据？

逻辑

>我选择选项,数据返回表
>我选择不同的选项,数据添加到旧的

问题

当我执行逻辑的第二部分时,它也会添加新表,这意味着根据我更改所选选项的次数,它会添加新表.

截图

当我选择我的第一个选项有1个表

当我选择我的第二个选项有2个表

我想要的是

我想要的是当我选择我的第二个/第三个等选项图像2时,只有1个表包含所有那些过去和当前选项的数据而不是为每个选项制作1个表.

码

HTML

<div class="mt-20 options"></div>

JavaScript的

<script>
    $(function(){
        $('select[name="options"]').on('change', function() {
            var addressID = $(this).val();
            if(addressID) {
                $.ajax({
                    url: '{{ url('admin/getoptions') }}/'+encodeURI(addressID),
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                        // $('div.options').empty();

                        $('div.options').append('<div class="mb-20"><h4>Check mark your needed options only</h4></div>'+
                          '<table id="table" class="table table-bordered table-hover table-responsive">'+
                          '<thead>'+
                            '<th width="50" class="text-center">Check</th>'+
                            '<th class="text-center">Title</th>'+
                            '<th class="text-center">Price</th>'+
                          '</thead>'+
                          '<tbody></tbody>'+
                          '</table>');

                        // 2. Loop through all entries
                        var keys = ['title'];
                        data.forEach(function(row) {
                          var $row = $('<tr />');

                          $row.append('<td class="text-center" width="50"><label class="switch switch-small"><input type="checkBox" /><span><input class="form-control" type="text" name="optionID[]" value="'+row['id']+'"></span></label></td>');
                          keys.forEach(function(key) {
                            $row.append('<td>' + row[key] + '</td>');
                          });
                          $row.append('<td class="text-center"><input class="form-control" placeholder="if fill this price, the price will add to product price when user select it." type="number" name="optionPRICE[]"></td>');

                          $('#table tbody').append($row);
                        });
                    }
                });
            }else{
                $('div.options').empty();
            }
        });
    });
</script>

任何的想法？

解决方法:

以下是要采取的步骤：

>删除$(‘div.options’).追加(…)调用
>将以下HTML添加到静态div元素,并使用style =“display：none”隐藏它：

<div class="mt-20 options" style="display:none">
    <div class="mb-20"><h4>Check mark your needed options only</h4></div>
    <table id="table" class="table table-bordered table-hover table-responsive">
        <thead>
            <th width="50" class="text-center">Check</th>
            <th class="text-center">Title</th>
            <th class="text-center">Price</th>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

>在data.forEach循环后添加代码,取消隐藏div：

    $('#table tbody').append($row);
}); // end of loop
$("div.options").show();  // <---