Fatal编程技术网

Javascript 动态创建表和行

javascript php jquery angularjs

Javascript 动态创建表和行,javascript,php,jquery,angularjs,Javascript,Php,Jquery,Angularjs,如何动态创建表，然后向表中添加行？我已经能够用一行表单字段创建表，但是如何添加其他行呢？任何关于它是如何实现的例子都会有帮助。我在第二节做了。 angular或jquery中的任何帮助。指令ng应用程序和ng控制器代码 Directive ng-app & ng-controller code HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html

如何动态创建表，然后向表中添加行？我已经能够用一行表单字段创建表，但是如何添加其他行呢？任何关于它是如何实现的例子都会有帮助。我在第二节做了。

angular或jquery中的任何帮助。

指令ng应用程序和ng控制器代码

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>


HTML
Hello AngularJS-动态添加表行
...
Controller.js中的Controller CompanyCtrl代码
var helloApp=angular.module（“helloApp”，[]）；
helloApp.controller（“CompanyCtrl”，函数（$scope）{
$scope.questions=[]；
$scope.addRow=函数（）{
$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=''；
};
)};
指令ng重复代码
标题
描述
数量
价格
全部的
{{问题.标题}
{{question.desc}}
{{问题数量}
{{问题.价格}
{{问题.总数}
**指令ng提交代码**
标题
描述
数量
价格
全部的

愉快的编码，希望它能帮助您

指令ng应用程序和ng控制器代码
HTML
Hello AngularJS-动态添加表行
...
Controller.js中的Controller CompanyCtrl代码
var helloApp=angular.module（“helloApp”，[]）；
helloApp.controller（“CompanyCtrl”，函数（$scope）{
$scope.questions=[]；
$scope.addRow=函数（）{
$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=''；
};
)};
指令ng重复代码
标题
描述
数量
价格
全部的
{{问题.标题}
{{question.desc}}
{{问题数量}
{{问题.价格}
{{问题.总数}
**指令ng提交代码**
标题
描述
数量
价格
全部的

愉快的编码，希望它能帮助您

您是如何做到这一点的？你不能再做同样的事情吗？通过$scope['questionelemnt'].push。从中学习。把它换成桌子。是否存在可以动态添加和删除表和行的JSFIDLE？如果要动态创建表或行或同时创建表和行，请具体说明问题所在？是的，同时创建表和行。添加了屏幕截图。你是如何做到这一点的？你不能再做同样的事情吗？通过$scope['questionelemnt'].push。从中学习。把它换成桌子。是否存在可以动态添加和删除表和行的JSFIDLE？如果要动态创建表或行或同时创建表和行，请具体说明问题所在？是的，同时创建表和行。已添加屏幕截图。请阅读原因请阅读原因 
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>