动态创建表格和行

问题描述：

如何动态创建表格然后将行添加到表格中？我已经能够用表单字段创建一行，但我如何添加额外的行？任何关于如何实施的例子都会有帮助。我没有在角2 screenshot 动态创建表格和行

$scope.newItem = function($event, valI) { 
    $scope['questionelemnt'].push({ 
    id: counter, 
    title: '', 
    desc: '', 
    Qty: '', 
    price: '', 
    total: '' 
    }); 
}

在角或jQuery的任何帮助。

你怎么一行做呢？你不能再这样做吗？ –

由$ scope ['questionelemnt']。push。从http://jsfiddle.net/JDS2U/22/了解到。将其替换为表格。是否有任何可以动态添加和删除表格和行的jsfiddle –

请指定问题究竟是什么，如果要动态创建表格或行或两者兼有？ – xelilof

答

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>

编码快乐，希望这将有助于你

请阅读为什么[只发布代码答案并不明智]（https://meta.stackexchange.com/a/148274/341145） –

动态创建表格和行

相关推荐