我们怎样才能使这个声明更有效?

How can we make this statement more valid?

' '+''+orderData.orders[i].delivery_address.delivery_pincode+''+''

中要发货的订单商品
  1. 您尝试在元素存在之前设置源。甚至在将 table 附加到容器

  2. 之前
  3. 您有永远无法使用的重复 ID。为什么不直接设置src呢?

  4. 使用 class 而不是内联样式

  5. 永远不要在单元格中使用 div - 要么没有 table 要么在单元格中使用 class

const orrArray = [ 
{"pid":1, "product_name":"n1","product_cost":1,"quantity":1 },
{"pid":2, "product_name":"n2","product_cost":2,"quantity":2 },
{"pid":3, "product_name":"n3","product_cost":3,"quantity":3 },
{"pid":4, "product_name":"n4","product_cost":4,"quantity":4 },
]

let table = []
const src = '/kernel/imageload?table=cat_images;key1=PID_thumb;key2=PID_thumb;key3=-100_thumb';
$.each(orrArray, function(index, value) {
  var newSrc = src.replace(/PID/g,value.pid);
  table.push(`<tr><td class="img-holder"><img src="${newSrc}" class="img" /></td>
    <td class="prod-title-col"><h3 class="prod-title">${value.product_name}</h3></td>
    <td class="prod-price-col"><h3 class="prod-cost">&#163;${(value.product_cost * value.quantity)}</h3></td>
  </tr>`);
});
$("#tb").append(table.join(""));
.img-holder img {object-fit: contain; height: 60px; width: 60px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody id="tb">
  </tbody>
</table>