append 在多个 div 条件下明智 jQuery

Question

I have an issue while appending the PHP response data in div condition-wise. I am trying to append the data if type=='I' then it will append in other div OR if type=='A' then it will append in other div.

The code which I am made is not working, even I try multiples time not achieve the goal. I also read the other threads but it was not helpful for me in my case. Please help me...

How I goal the achieve and make code correct.

 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>

Answer 1

Simplified version with fixes to the repeating ID in the tables and only using the conditionals to assign variables then only processing those variables once after the conditionals

 $("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>