Question

我有<div id="profile">... <table>...<tbody></tbody></table> </div>。在脚本中，我得到一个对象数组并迭代该数组，我想将每个对象的信息添加到表格行中。

            var $tr=$("<tr></tr>");
            var $td=$("<td></td>");
            $.each(selectedItems, function(index, obj){ //selectedItems is array of objects

                $td.html(obj.itemName);
                $tr.append($td);
                $td.html(obj.itemCount);
                $tr.append($td);
                $td.html(obj.itemPrice);
                $tr.append($td);
                $("#profile").find("table tbody").append($tr);
                $tr.empty();
                $td.empty();
            })

通过上面的代码，我希望每次迭代都会给我以下结果：<tr><td>obj.itemName</td><td>obj.itemCount</td><td>obj.itemPrice</td></tr>。但是当我使用谷歌开发者工具查看HTML时，我什么都没得到。 selectedItems数组不为空（我检查过它），它的对象也不是空的。我该怎么做才能得到理想的结果？

Answer 1

这个怎么样..

<tbody>
<% selectedItems.forEach(function(i){%>
    <tr>
         <td><%= i.itemName%></td>
         <td><%= i.itemCount%></td>
         <td><%= i.itemPrice %> \</td>

    </tr>                                           
<%});%>
</tbody>

Answer 2

我没有使用库，所以这可能有效：

var profile = document.querySelector('#profile table tbody');
var domCollection = document.createElement("div");

selectedItems.forEach(function(obj){
  var aRow = [
    obj.itemName,
    obj.itemCount,
    obj.itemPrice
  ]; // JH: 01 change their order to fullfil your wish, or add whatever you like

  var domTR = document.createElement('tr');  // JH: 02 create a <tr> element
  domTR.innerHTML = "<td>" + aRow.join('</td><td>') + "</td>" ;  // add content

  domCollection.appendChild( domTR );  // JH: 03 add this row into domCollection.
});

// JH: 04 put all rows into profile
profile.innerHTML += domCollection.innerHTML; // prevent update DOM tree too many times

如果你喜欢jQuery：

var $tmp = $('<div></div>');
$.each(selectedItems, function(index, obj){
  var aElements = [
    obj.itemName,
    obj.itemCount,
    obj.itemPrice
  ];
  var $tr = $('<tr></tr>');
  $.each(aElements, function(i,str) { // append all elements into $tr
    var $td = $('<td></td>').html(str);
    $tr.append($td);
  });

  $tmp.append($tr);
});

$("#profile").find("table tbody").append($tmp.html()); // append content only once

如何将创建的元素追加到表中

2 个答案: