追加多个 div 条件明智的 jQuery

如何解决追加多个 div 条件明智的 jQuery

我在按 div 条件附加 PHP 响应数据时遇到问题。我试图附加数据，如果 type=='I' 那么它会附加到其他 div 或者如果 type=='A' 那么它会附加在其他 div 中。

我编写的代码不起作用，即使我多次尝试也没有达到目标。我也阅读了其他线程，但在我的情况下对我没有帮助。请帮帮我...

我如何实现目标并使代码正确。

var mytable = $("table#table");
var mytableWithHeader = mytable.append('<thead><tr><th style="width: 20%; text-align: center; vertical-align: middle;">Name/House</th><th style="width: 10%; text-align: center; vertical-align: middle;">Age/Rent</th></tr></thead><tbody></tbody>');
$.each(response.data,function(i,item) {
  mytableWithHeader.find('tbody').append(`
    <tr>
      <td>${item.name}</td> 
      <td>${item.age}</td>
    </tr>
  `);
});

//I am trying to do is below -
$.each(response.data,item) {
  if ({item.type } == 'I') {
    mytableWithHeader.find('tbody').append(`
    <tr>
      $("div.tab1").prepend("
        <td>${item.name}</td> 
        <td>${item.age}</td>
      ");
      </tr>
    `);
  }

  if ({ item.type } == 'A') {
    mytableWithHeader.find('tbody').append(`
    <tr>
      $("div.tab2").prepend("
        <td>${item.house}</td> 
        <td>${item.rent}</td>
      ");
      </tr>
    `);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab1">    
 <table id="table"></table>
</div>

<div class="tab2">    
 <table id="table"></table>
</div>

解决方法

简化版本，修复了表格中的重复 ID，仅使用条件来分配变量，然后仅在条件之后处理这些变量一次

$("table.tab_table").append('<thead><tr><th style="width: 20%; text-align: center; vertical-align: middle;">Name/House</th><th style="width: 10%; text-align: center; vertical-align: middle;">Age/Rent</th></tr></thead><tbody></tbody>');

$.each(response.data,function(i,item){ 
    const {type,house,rent,name,age} = item;
    let $cont,rowItems ;

    if(type === 'A'){
       $cont = $('.tab2');
       rowItems = [house,rent];              
    }else{
       $cont = $('.tab1');
       rowItems = [name,age];         
    }

    const $cells = rowItems.map(txt => $('<td>').text(txt)),$row = $('<tr>').append($cells);

    $cont.find('table').append($row);
});

td{text-align:center}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab1">    
 <table class="tab_table"></table>
</div>

<div class="tab2">    
 <table class="tab_table"></table>
</div>

<script>
const response = {
   data:[
     {type:'I',name:'Mr Foo',age:37},{type:'I',name:'Mrs Bar',age:93},{type:'A',house:'big',rent:200},house:'small',rent:100}     
   ]
}
</script>