angularjs 表格的增刪改查
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>綜合練習</title> <style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } </style> <script type="text/javascript"src="../AngularJS/angular.js" ></script> <script type="text/javascript" src="../AngularJS/angular-route.js" ></script> <script type="text/javascript"> var app = angular.module("myApp",["ngRoute"]); //定義路由規則 app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/addUser",{//新增用路由地址 controller:"addCtrl", templateUrl:"addUser.html" }) .when("/updatePwd/:name",{//修改密碼用路由地址 controller:"updateCtrl", templateUrl:"updatePwd.html" }) .otherwise({redirectTo:"/addUser"}); }]); app.controller("myCtrl",function($scope,$location){ $scope.users = [ {"id":1,"name":"張三","pwd":"123","age":22,"sex":"男","state":false}, {"id":2,"name":"李四","pwd":"456","age":33,"sex":"女","state":false}, {"id":3,"name":"王五","pwd":"789","age":44,"sex":"男","state":false} ]; //給按鈕新增點選事件，根據傳過來的引數，判斷跳轉到的路由地址 $scope.goToPath = function(path){ alert(path); $location.path(path); } }); //新增使用者控制器 app.controller("addCtrl",function($scope){ $scope.name = "";//雙向資料繫結，獲得頁面輸入的新使用者資訊 $scope.pwd = ""; $scope.age = ""; $scope.sex = ""; $scope.sub = function(){ //遍歷資料來源，拿到最大的使用者id $scope.idMax = 0; for(index in $scope.users){ if($scope.users[index].id > $scope.idMax){ $scope.idMax = $scope.users[index].id; } } //建立新使用者物件 var user = { id:$scope.idMax+1, name:$scope.name, pwd:$scope.pwd, age:$scope.age, sex:$scope.sex }; //把新獲得的使用者物件新增到資料庫陣列中 $scope.users.push(user); } }); //修改密碼控制 app.controller("updateCtrl",function($scope,$routeParams){ var name = $routeParams.name;//獲得要修改的使用者的使用者名稱 $scope.name = name;//將要修改使用者的名字，賦值給雙向資料繫結的頁面使用者名稱顯示。 $scope.pwd1 = "";//雙向資料繫結使用者輸入的新密碼 //點選修改密碼按鈕，執行修改密碼方法 $scope.updatePwd = function(){ //遍歷資料來源，通過比較資料來源中使用者名稱跟引數要修改的使用者名稱一致，進行密碼修改 for(index in $scope.users){ if($scope.users[index].name == name){ //獲得使用者輸入的密碼，賦值給當前使用者要修改的新密碼。 $scope.users[index].pwd = $scope.pwd1; } } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <h3>使用者資訊表</h3> <div> <input placeholder="使用者名稱查詢" size="10" /> <!--<input ng-model="ageSize" placeholder="年齡查詢(a-b)" size="10"/>--> 年齡：<select id="age"> <option>--請選擇--</option> <option>11-20</option> <option>21-30</option> <option>31-40</option> <option>41-50</option> <option>51-60</option> </select> 性別：<select> <option>男</option> <option>女</option> </select> <input type="button" value="全部刪除" /> <input type="button" value="批量刪除" /> </div><br /> <div> <table border="1" cellspacing="1" cellpadding="10"> <thead> <tr> <th><input type="checkbox" /> </th> <th>id</th> <th>使用者名稱</th> <th>密碼</th> <th>年齡</th> <th>性別</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="user in users "> <td><input ng-model="user.state" type="checkbox"/></td> <td>{{user.id}}</td> <td>{{user.name }}</td> <td>{{user.pwd}}</td> <td>{{user.age }}</td> <td>{{user.sex}}</td> <td><button ng-click="goToPath('/updatePwd/'+user.name)">修改密碼</button> </td> </tr> </tbody> </table> </div><br /> <button class="addUser" ng-click="goToPath('/addUser')">新增使用者</button><br /><br /> <!-- 1.新增使用者頁面 --> <script type="text/ng-template" id="addUser.html"> <formaction=""> <tableborder="1"cellspacing="1"cellpadding="10"> <tr> <th>使用者名稱：</th> <td><input ng-model="name" placeholder="請輸入使用者名稱" /></td> </tr> <tr> <th>密 碼：</th> <td><input ng-model="pwd" placeholder="請輸入密碼" /></td> </tr><tr> <th>年 齡：</th> <td><input ng-model="age" placeholder="請輸入年齡" /></td> </tr><tr> <th>性 別：</th> <td><input ng-model="sex" placeholder="請輸入性別" /></td> </tr> <tr align="center"> <td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td> </tr> </table> </form> </script> <!-- 2.修改使用者資訊頁面 --> <script type="text/ng-template" id="updatePwd.html"> <form> <tableborder="1"cellspacing="1"cellpadding="10"> <tr> <th>使用者名稱：</th> <td><input disabled="disabled" ng-model="name" placeholder="請輸入使用者名稱" /></td> </tr> <tr> <th>舊密碼：</th> <td><input ng-model="oldPwd" placeholder="請輸入密碼" /></td> </tr><tr> <th>新密碼：</th> <td><input ng-model="pwd1" placeholder="請輸入年齡" /></td> </tr><tr> <th>確 認：</th> <td><input ng-model="pwd2" placeholder="請輸入性別" /></td> </tr> <tr align="center"> <td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td> </tr> </table> </form> </script> <!-- 6.指定相應內容 --> <div ng-view> </div> </center> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>綜合練習相關推薦
javascript 表格增刪改查 排序不會（第一次寫部落格，求交流哈）
學習JS快1個月了，博主本人上的是培訓的，快考試了，補習下學過的 發下今晚寫的吧。。。 有大神看看我的這種程度，排序事件怎麼弄~~ <!DOCTYPE html><html lang="zh"><head> <
Jquery+Bootsrap純前臺 表格增刪改查操作
介面: bootstrap JavaScript框架 :Jquery 練習: 節點操作。 效果圖: 線上檢視 原始碼: <!DOCTYPE
angularjs陣列增刪改查
<center> <h2>賬單查詢</h2> <input type="text" ng-model="add_id"/> <input type="text" ng-model="add_name" /> <inp
angularjs實現增刪改查
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath
純JS+HTML簡單表格增刪改查
首先這兩天寫的一個簡單增刪改查，基本上靠百度和自學，完成的這個作業。 裡面的功能十分的簡陋，對於有需要的朋友一點點幫助吧。 這不是一條通往專案的連結：https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w 密碼：030a 裡面有一
bootstrap-table 實現表格增刪改查
bootstrap、bootstrap-table官網：http://bootstrap-table.wenzhixin.net.cn/documentation/ 相關cs js 引用dns地址： http://www.bootcdn.cn/bootstrap/ 下載到
angularjs表格的增刪改查完成功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> &l
angularjs 表格的增刪改查
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>綜合練習</title> <sty
vue實現對表格數據的增刪改查
bsp bin targe blank umeng com ref tps bing http://www.cnblogs.com/xumengxuan/p/7144580.html 原文地址: https://www.xiabingbao.com/vue/2017/0
AngularJS 實現管理系統中的增刪改查
系統 earch load onf auto splay adding bootstrap sof 前 言 AngularJS 在一個管理系統中，不外乎都是增刪改查。 現在有如下圖書管理系統，實現簡單的增刪改查。 需要用到bootstrap.css 、angula
基於AT UI實現表格的增刪改查遇到的坑
data 基於 報錯 color CA cannot bsp 加載 http 基於AT UI實現表格的增刪改查遇到的坑 坑一、表格數據加載的渲染報錯 報錯：Error in render: "TypeError: Cannot read property ‘isC
例項：建立一個表格，分頁顯示資料（MongoDB資料庫儲存），功能：實現增刪改查
需求：建立一個表格，分頁顯示資料，功能：實現增刪改查 效果圖： 自動建立一個專案 命令列： express mongodb-demo --view=ejs cd mongodb-demo npm install npm install mongodb --save npm sta
AngularJs 增刪改查+刪除+批量刪除+全反選
<head> <meta charset="utf-8" /> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></s
layui進行分頁處理，後端返回資料沒有count欄位，需要單獨獲取再新增到資料中，再進行項渲染，另有layui表格資料增刪改查前後端互動
整體效果圖如下： （1）分頁前端介面處理 （2）分頁後端的資料處理 具體程式碼如下： 前端介面程式碼：包括分頁，增刪改查，重新整理（搜尋功能還沒做，後端是java程式碼） <!DOCTYPE html> <html> <hea
基於Myeclipse與MySQL資料庫表格的增刪改查
注：本部落格是基於myeclipse的靜態訪問自創表格的進一步完善。（連線到MySQL資料庫，對資料庫中的表格資訊進行增刪改查操作）其中做出修改的地方如下：一、程式碼的改進1、list.jsp中修改後的內容<body> <table> &l
angularJS增刪改查敏感字
if($scope.shang[i].state == true) { $scope.shang. i--; } } } } //判斷日期 $scope.valu = function(
angularJS增刪改查，非空，年齡區間
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/jav
【BootStrap】--具有增刪改查功能的表格Demo
var strAppend = '<tr style="background: rgb(255, 255, 255) none repeat scroll 0% 0%;"><td ><input type="checkbox" value="" edita
angular1.x 實現表格的增刪改查
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>實現表格的增刪改查</title> <meta http
一個表格教你完成MySQL的增刪改查操作
MySQL簡單的增刪改查 簡介: 1.就是一個檔案系統，使用標準sql對資料庫進行操作（crud） 2.資料庫分類:關係型資料庫和非關係型資料庫 a) 常用的關係型資料庫:mysql oracle d