我们如何重复jquery中的表行,如angularjs与ng-repeat一样？

Question

我们如何在jquery中对表行进行rpeat,就像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完成具有重复行的动态表生成.