javascript - Dynamically create table and rows -
how can create table dynamically , add rows table? have been able create table 1 row form fields, how can add additional rows? example on how has been implement helpful. did in angular 2. screenshot
$scope.newitem = function($event, vali) { $scope['questionelemnt'].push({ id: counter, title: '', desc: '', qty: '', price: '', total: '' }); }
any in angular or jquery.
directive ng-app & ng-controller code html <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html ng-app="helloapp"> <head> <title>hello angularjs - add table row dynamically</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> <script src="assets/js/controllers.js"></script> </head> <!-- controller name goes here --> <body ng-controller="companyctrl"> ... </body> </html> controller companyctrl code in controller.js <script> var helloapp = angular.module("helloapp", []); helloapp.controller("companyctrl", function($scope) { $scope.questions = []; $scope.addrow = function(){ $scope.questions.push({ 'title':$scope.title, 'desc': $scope.desc, 'qty':$scope.qty,'price':$scope.price,'total':$scope.total }); $scope.title=''; $scope.desc=''; $scope.qty=''; $scope.price=''; $scope.total=''; }; )}; </script> directive ng-repeat code <table class="table"> <tr> <th>title </th> <th>desc </th> <th> qty </th> <th>price </th> <th>total </th> </tr> <tr ng-repeat="question in questions"> <td>{ {question.title}} </td> <td>{ {question.desc}} </td> <td>{ {question.qty}} </td> <td>{ {question.price}} </td> <td>{ {question.total}} </td> </tr> </table> **directive ng-submit code** <form class="form-horizontal" role="form" ng-submit="addrow()"> <div class="form-group"> <label class="col-md-2 control-label">title</label> <div class="col-md-4"> <input type="text" class="form-control" name="title" ng-model="title" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">desc</label> <div class="col-md-4"> <input type="text" class="form-control" name="desc" ng-model="desc" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">qty</label> <div class="col-md-4"> <input type="text" class="form-control" name="qty" ng-model="qty" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">price</label> <div class="col-md-4"> <input type="text" class="form-control" name="price" ng-model="price" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">total</label> <div class="col-md-4"> <input type="text" class="form-control" name="total" ng-model="total" /> </div> </div> <div class="form-group"> <div style="padding-left:110px"> <input type="submit" value="submit" class="btn btn-primary"/> </div> </div>
happy coding ,hope you
Comments
Post a Comment