jquery - 我们怎样才能像 AngularJS 那样用 ng-repeat 重复 jquery 中的表格行？

Question

我们如何在 jquery 中重复表行，就像 angularjs 使用 ng-repeat 那样？

<table>
    <tr ng-repeat="person in people">
        <td>{{ person.name }}</td>
    </tr>
</table>

Answer 1

您可以使用 jquery 的each() 来实现此目的。

第 1 步。 前提是你应该有一些js对象结构

var people = {
 "persons" : [
  {"name":"ABC", "address":"XYZ"},
  {"name":"PQR", "address":"STO"},
  {"name":"LMN", "address":"POP"}
 ]
};

第 2 步:创建 html 表格元素，在其中创建动态行:

<table id="dynamicTable">    
</table>

第3步.使用jquery的each()函数动态生成表tr并在第1步中提供js对象

var inHTML = "";

$.each(people.persons, function(index, value){
    var newItem = "<tr><td>"+ value.name + "</td></tr>"
    inHTML += newItem;  
});

$("table#dynamicTable").html(inHTML); //add generated tr html to corresponding table

按照这些步骤，可以使用 jquery 生成具有重复行的动态表。