时间戳

首页 > 解决方案 > 追加多个div条件明智的jQuery

html - 追加多个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, 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>

标签： htmljqueryappendresponseprepend

解决方案

简化版本，修复了表中的重复 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>

推荐阅读