新增刪除修改表單

阿新 • • 發佈：2019-01-21

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title></title>
      <script src="jquery-2.1.0.js" type="text/javascript"></script>
      <script src="angular.js" type="text/javascript"></script>
      <script src="angular-route.js"  
type="text/javascript"></script>
      <script type="text/javascript">
         var app=angular.module("myapp",["ngRoute"]);
         var user=[{"id":"1","name":"張三","pwd":"111","age":"20","sex":"男"},
         {"id":"2","name":"李四","pwd":"222","age":"21","sex":"女"},
         {"id":"3","name" 
:"王五","pwd":"333","age":"22","sex":"男"}];
         app.value("user",user);
         app.config(["$routeProvider",function($routeProvider){
            $routeProvider
            .when("/up",{
               controller:"myctrl",
               templateUrl:"up.html"})
            .when("/add",{
               controller 
:"myctrl",
               templateUrl:"add.html"
});
         }]);
         app.controller("myctrl",function($scope,user,$location){
            $scope.user=user;
            $scope.del=function(){
               $scope.user.splice($scope.user);
            };
            $scope.goToUrl=function(path){
               $location.path(path);
            };
            $scope.goTourl=function(path){
               $location.path(path);
            };
            $scope.dd=function(){
               var usernew={id:$scope.id,
               name:$scope.name,
               pwd:$scope.pwd,
               age:$scope.age,
               sex:$scope.sex};
               $scope.user.push(usernew);
            };
            var ii=0;
            $scope.upp=function($index){
               $scope.newpwdd=$scope.user[$index].pwd;
               $scope.newname=$scope.user[$index].name;
               ii=$index;
            };
            $scope.gmm=function(){
               $scope.user[ii].pwd=$scope.newpwd;
            };
         });
      </script>
      <style>
         .header{
            width: 700px;
            height: 50px;
         }
         .name{
            margin-top: 10px;
         }
         .age{
            margin-top: 10px;
         }
         .sex{
            margin-top: 10px;
         }
         .add{
            margin-top: 20px;
         }
      </style>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
      <center>
      <div class="header">
         使用者名稱:<input type="text" class="name" ng-model="search" />
         年齡：<input type="text" class="age" ng-model="searchone" />
         性別：<select class="sex" ng-model="searchtwo">
            <option></option>
            <option>男</option>
            <option>女</option>
         </select>
         <button ng-click="del()">全部刪除</button>
      </div>
      <table border="1" cellpadding="20" cellspacing="0">
         <tr>
            <th>id</th>
            <th>使用者名稱</th>
            <th>密碼</th>
            <th>年齡</th>
            <th>性別</th>
            <th>操作</th>
         </tr>
         <tr ng-repeat="u in user | filter:{'name':search} | filter:{'age':searchone} | filter:{'sex':searchtwo}">
            <td>{{u.id}}</td>
            <td>{{u.name}}</td>
            <td>{{u.pwd}}</td>
            <td>{{u.age}}</td>
            <td>{{u.sex}}</td>
            <td>
               <button ng-click="goToUrl('/up');upp($index)" >修改密碼</button>
            </td>
         </tr>
      </table>
      <button class="add" ng-click="goTourl('/add')">新增使用者</button>
      <script type="text/ng-template" id="up.html">
         <formaction="#">
            <table>
               <tr>
                  <td>使用者名稱: </td>
                  <td><input type="text" ng-model="newname" /></td>
               </tr>
               <tr>
                  <td>舊密碼: </td>
                  <td><input type="text" ng-model="newpwdd" /></td>
               </tr>
               <tr>
                  <td>新密碼:</td>
                  <td><input type="text" ng-model="newpwd"  /></td>
               </tr>
               <tr>
                  <td>確認密碼:</td>
                  <td><input type="text" /></td>
               </tr>
               <tr>
                  <td colspan="2" align="center">
                     <input type="button" ng-click="gmm()" value="提交" />
                  </td>
               </tr>
            </table>
         </form>
      </script>
      <script type="text/ng-template" id="add.html">
         <formaction="#">
            <table>
               <tr>
                  <td>id:</td>
                  <td><input type="text" ng-model="id" /></td>
               </tr>
               <tr>
                  <td>使用者名稱:</td>
                  <td> <input type="text" ng-model="name" /></td>
               </tr>
               <tr>
                  <td>密碼:</td>
                  <td><input type="text" ng-model="pwd" /></td>
               </tr>
               <tr>
                  <td>年齡:</td>
                  <td><input type="text" ng-model="age" /></td>
               </tr>
               <tr>
                  <td>性別:</td>
                  <td><input type="text" ng-model="sex" /><br /></td>
               </tr>
               <tr>
                  <td colspan="2" align="center"><input type="button" ng-click="dd()" value="提交" /></td>
               </tr>
            </table>
         </form>
      </script>
      <div ng-view>
         
      </div>
      </center>
   </body>
</html>

新增刪除修改表單

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <scrip

EasyUI之動態修改或新增textbox等表單元件

在某個input標籤上新增 class="easyui-datebox" 它就能自動變成日曆，這其實是EasyUI掃描的結果，在網頁載入完成後，相當於在$(document).ready()事件中，對整個網頁進行了一次掃描，發現某個input標籤含有cl

MySQL表操作新增刪除修改主鍵

主鍵 primary key 建立表的時候新增主鍵 create table table_test( `id` varchar(100) NOT NULL, `name` varchar(100)

SQl 語句(常見) 新建,刪除,修改表，新增欄位，修改預設值

SQl 語句(常見) 新建,刪除,修改表結構新建表： create table [表名] ( [自動編號欄位] int IDENTITY (1,1) PRIMARY KEY , [欄位1] nV

CSS3過渡結束監聽事件,清除/修改表單元素的一些默認樣式

表單修改監聽 hold 移動 span ner 表單元 expand document.querySelector(‘div‘).addEventListener(‘transitionEnd‘,function(){ console.log(‘過度

HTML5（二）——特殊符號、新增屬性、表單重寫屬性、

枚舉值 mac a-z nova ride prevent edit wid inf 一、HTML5 特殊符號 &nbsp ：空格 &gt：大於號 > &It ：小於號 < &quot ：引號”

資料檢驗外掛： Validate外掛新增自定義表單驗證

jQuery.validator.addMethod("ValiPass", function(value, element,params) { var exp =

Dyanmics CRM Plugin 修改表單狀態為啟用

Entity entity_update = new Entity() { LogicalName = "", Id =id }; entity_update["statecode"] = new OptionSetValue(0); entity_update["statusc

Hive新增刪除修改欄位

新增刪除欄位語法： ALTER TABLE table_name [PARTITION partition_spec] -- (Note: Hive 0.

用layui修改表單select值後沒有變，沒有反應，解決方案

解決方案： $("#admin_user_id").prepend("<option value='0'>--請選擇服務人員--</option>"); #admin_

Java JDBC資料庫之讀取,新增,刪除,修改

下載 Oracle 或者 Mysql Jar 驅動 mysql-connector-java-3.0.10-stable-bin.jar ojdbc14.jar package com.jdbc.test; import java.sql.Connection;

Ext.grid.Panel遠端載入資料分頁，提供新增刪除修改等操作

Ext.grid.Panel遠端載入NorthWind中Customers資料，並提供分頁、新增、刪除、修改和檢視操作，介面如下圖： Ext.grid.Panel Ajax載入資料新增介面修改介面檢視介面 Extjs程式碼如下： //Ext.grid.Pan

jquery 給input text元素賦值,js修改表單的值

如何在Linux下新增/刪除/修改使用者及使用者組

Linux使用者和使用者組的管理 Linux系統是一個多使用者多工的分時作業系統，任何一個要使用系統資源的使用者，都必須首先向系統管理員申請一個賬號，然後以這個賬號的身份進入系統，那麼在Linux下如何進行使用者的新增，刪除和修改，使用者組怎麼設定，使用者密碼

用C語言模擬實現一個通訊錄，要求實現其新增刪除修改查詢模糊搜尋姓名和號碼顯示和排序聯絡人資訊的功能

題目：用C語言模擬實現一個通訊錄，要求實現其新增、刪除、修改、查詢、模糊搜尋姓名和號碼、顯示和排序

oracle(建立/刪除/修改使用者，建立/刪除/修改表空間，授權使用者，刪除所有表，給使用者指定表空間

--oracle刪除某個使用者下的所有表 --此句只是查詢並且拼接sql，然後將執行的sql複製然後執行即可 select 'drop table '||table_name||';' from cat where table_type='TABLE'; export O

HTML5新增屬性和表單元素

HTML5新增屬性與表單元素一、HTML5新增屬性1.1、contextmenucontextmenu的作用是指定右鍵選單。<!DOCTYPE html> <html> <head> <meta charset

jquery製作具有新增與刪除功能的表單（轉載加修改）

jQuery製作具有新增與刪除功能的表單效果圖如下： js程式碼如下： $(document).ready(function(){ //<tr/>居中 $("#tab tr").attr("align","center"); //增加&

（八）MySQL基礎——主鍵、外來鍵、修改表時新增刪除約束、標識列

一、主鍵和唯一的區別：保證唯一性是否允許為空一個表可以有多少個是否允許組合主鍵 √ × 至多有1個 √，但不推薦

struts2 vallidate驗證表單提交修改樣式——刪除li標籤原點、取消換行、改變字型顏色

老師佈置實現的一個小效果，不容小覷！預定成功顯示頁面預定報錯顯示頁面從圖片可以看出需要實現報錯提示換行以及字型顏色更改的需求。網上有很多方法，這裡介紹兩種親測可用的吧：修改struts2-core-x.x.x.jar

新增 刪除 修改表單

相關推薦

新增刪除修改表單