追加多个div条件明智的jQuery答案

【问题标题】：append in multiple div condition wise jQuery追加多个div条件明智的jQuery
【发布时间】：2021-07-04 13:29:06
【问题描述】：

在按条件在 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, function(i, 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>

【问题讨论】：

为什么你的if 语句中有一个美元符号和大括号？在if ($ {item.type } == 'I') { 处抛出错误
我已经在你的 sn-p 中启用了控制台。运行它以查看错误。
你真的想将文字 jQuery 代码放入表中吗？
@isherwood 试图指出的是if ($ {item.type } == 'I') 应该是if (item.type == 'I')。您只需将 ${} 放在模板文字中的变量周围。
错字：</r> 应该是 </tr>

标签： html jquery append response prepend

【解决方案1】：

修正了表格中重复 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},
     {type:'A', house:'small', rent:100}     
   ]
}
</script>

【讨论】：