jQuery将新数据追加到旧数据有重复的问题

Question

如何在不重复表的情况下将新数据添加到旧数据中？

逻辑

1. 我选择选项，数据返回表中
2. 我选择了其他选项，数据又添加到了旧的

问题

当我执行逻辑的第二部分时，它也会添加新表，含义是基于我更改所选选项的次数，它还会添加新表。

屏幕截图

when i select my first option有1张桌子

when i select my second option有2张桌子

我想要的

我想要的是当我选择第二个/第三个等选项image 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>

有什么主意吗？

Answer 1

首先，您需要构建一次表。但是，每个成功调用都会添加新表。这发生在行中：

$('div.options').append('<div class="mb-20">...

该追加实际上是创建表并将其追加到div。

相反，您应该仅在成功回调之前创建表一次，然后仅使用新数据对其进行更新。

$(function(){
    var updateTable =  function() {
        var addressID = $(this).val();
        var data = JSON.parse(addressID);
        
        // show the table div
        $('div.options').show();

        // clear old rows
        $('tbody', myTable).empty();

        // 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+'"></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>');

          $('tbody', myTable).append($row);
        });
    };
    
    // create and save table for later manipulations
    var myTable = $('<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>');
   // append h4
   $('div.options').append('<div class="mb-20"><h4>Check mark your needed options only</h4></div>');
   // append the table
   $('div.options').append(myTable);
   // select event
   $('select[name="options"]').on('change', updateTable);
   updateTable.call($('select[name="options"]').first());
});

{"d":4,"e":5,"f": 6}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="options">
  <option value="[1,2,3]">Data1</option>
  <option value="[4,5,6]">Data2</option>
</select>
<div class="options"></div>

Answer 2

以下是要采取的步骤：

1. 删除$('div.options').append( ... )通话

2. 将以下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>
   

3. 在data.forEach循环后添加代码，以取消隐藏div：

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