用AngularJS实现对表格的增删改查（仅限前端），具体代码：

Meta charset="UTF-8"> 实现表格的增删改查

nofollow" type="text/css"> nofollow" type="text/css"> nofollow" type="text/css">

管理信息：

搜索：

修改

<div class="modal-dialog"&gt;

 <div class="modal-content"&gt;

  <div class="modal-header"&gt;
   <button class="close" data-dismiss="modal"&gt;
    <span class="glyphicon glyphicon-remove"&gt;</span>
   </button>
   <h3 class="modal-title"&gt;<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>信息</h3>
  </div>

  <div class="modal-body"&gt;
   <div>姓名：</div>
   <input ng-model="newName" type="text"&gt;
   <div>年龄：</div>
   <input ng-model="newAge" type="text"&gt;
   <div>城市：</div>
   <input ng-model="newCity" type="text"&gt;
  </div>

  <div class="modal-footer"&gt;
   <button class="btn btn-default" data-dismiss="modal"&gt;<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a></button>
   <button class="btn btn-success" ng-click="save()"&gt;保存</button>
  </div>

 </div>

</div>

<div class="modal-dialog"&gt;

 <div class="modal-content"&gt;

  <div class="modal-header"&gt;
   <button class="close" data-dismiss="modal"&gt;
    <span class="glyphicon glyphicon-remove"&gt;</span>
   </button>
   <h3 class="modal-title"&gt;<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>信息</h3>
  </div>

  <div class="modal-body"&gt;
   <div>姓名：</div>
   <input ng-model="prod.name" value="{{prod.name}}" type="text"&gt;
   <div>年龄：</div>
   <input ng-model="prod.age" value="{{prod.age}}" type="text"&gt;
   <div>城市：</div>
   <input ng-model="prod.city" value="{{prod.city}}" type="text"&gt;
  </div>

  <div class="modal-footer"&gt;
   <button class="btn btn-default" data-dismiss="modal"&gt;<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a></button>
   <button class="btn btn-success" ng-click="ensure()"&gt;确定</button>
  </div>

 </div>

</div>

//定义一个全局变量idx,用于存储选中行的索引，方便执行保存操作。idx取值为0、1、、、、都有用，所以暂取值为-1;
var idx = -1;
//定义一个点击添加按钮时触发的事件，用于新增数据
$scope.add = function(){
//显示bootstrap中的模块窗口
$('#modal-1').modal('show');

};
//定义一个点击保存按钮时触发的事件
$scope.save = function(){
//将添加的值赋给数组
$scope.texts.name = $scope.newName;
$scope.texts.age = $scope.newAge;
$scope.texts.city = $scope.newCity;
$scope.texts.push({name:$scope.newName,age:$scope.newAge,city:$scope.newCity});
//关闭模块窗口
$('#modal-1').modal('hide');
};

//定义一个点击修改按钮时出发的事件，用于修改数据
$scope.update = function($index){
//显示bootstrap中的模块窗口
$('#modal-2').modal('show');

//将选中行的数据绑定到临时对象prod中，在下面的模态窗口中展示出来
$scope.prod.name = $scope.texts[$index].name;
$scope.prod.age = $scope.texts[$index].age;
$scope.prod.city = $scope.texts[$index].city;
//选中行的索引赋值给<a href="https://www.jb51.cc/tag/quanjubianliang/" target="_blank" class="keywords">全局变量</a>idx
idx = $index;

};

//定义一个点击确定按钮时触发的事件,$scope.ensure = function () {
//将修改后的值赋给数组
$scope.texts[idx].name = $scope.prod.name;
$scope.texts[idx].age = $scope.prod.age;
$scope.texts[idx].city = $scope.prod.city;
//关闭模块窗口
$('#modal-2').modal('hide');
};

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/js/38127.html

增删改查表格表格表格