Many projects are done on the web server. The front-end and the back-end write jsp code. Both parties need to work closely together to distinguish responsibilities. Some projects provide restful methods by the backend, and the frontend calls itself to loop with ajax. This is usually a lot of jquery spelling strings, which are too unintuitive. Some people have created a js template, but it is not much better.
It's much more fun to use AngularJS, and the syntax is similar to JSP:
<!doctype html><html ng-app><head> <meta charset="utf-8"> <title>ng-repeat directive</title></head><body><table ng-controller="CartController"> <caption>My shopping cart</caption> <ttr> <th>Serial number</th> <th>Product</th> <th>Unit price</th> <th>Quantity</th> <th>Amount</th> <th>Operation</th> </tr> <ttr ng-repeat="item in items"> <td>{{$index + 1}}</td> <td>{{item.name}}</td> <td>{{item.price | currency}}</td> <td><input ng-model="item.quantity"></td> <td>{{item.quantity * item.price | currency}}</td> <td> <button ng-click="remove($index)">Remove</button> </td> </td> </tr></table> <script src="../lib/angularjs/1.2.26/angular.min.js"></script><script> function CartController($scope) { $scope.items = [ {name: "Rapoo (Rapoo) V500 Mechanical Game Keyboard Mechanical Yellow Axle", quantity: 1, price: 199.00}, {name: "Rapoo V20 Optical Gaming Mouse Black Flame Edition", quantity: 1, price: 139.00}, {name: "AngularJS Authoritative Tutorial", quantity: 2, price: 84.20} ]; $scope.remove = function (index) { $scope.items.splice(index, 1); } }</script></body></html>The ng-repeat directive life is on elements that need to loop content. Items correspond to the variable names on the controller. Item is an alias for a single object in the array. $index can return the order number of the current reference object, starting from 0, and $first, $middle, and $last can return boolean values to tell you whether the current element is the last element in the first middle of the collection.