<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>

   </head>

   <body>

       <table id="tableID" border="1" align="center" width="60%">

           <thead>

               <tr>

                   <th>用户名</th>

                   <th>密码</th>

                   <th>操作</th>

               </tr>

           </thead>

           <tbody id="tbodyID">

               <!-- 动态增加行 -->

           </tbody>

       </table>

       <hr/>

       用户名：<input type="text" id="usernameID"/>

       密码：  <input type="text" id="passwordID"/>

               <input type="button" value="增加" id="addID"/>

   </body>

   <script type="text/javascript">

       $("#addID").click(function(){

           //获取用户名和密码

           var username = $("#usernameID").val();

           var password = $("#passwordID").val();

           //去空格

           username = $.trim(username);

           password = $.trim(password);

           //判断

           if(username!=null && password!=null && username.length>0 && password.length>0){

             //创建tr对象

             var $tr = $("<tr></tr>")

             //创建3个td对象

             var $td1 = $("<td>" + username + "</td>");

             var $td2 = $("<td>" + password + "</td>");

             var $td3 = $("<td></td>");

             //创建按钮

             var $delButton = $("<input type='button' value='删除'>");

             //将按钮添加到td对象，形成父子关系

             $td3.append($delButton);

             //为按钮添加单击事件

             $delButton.click(function(){

                  $tr.remove();

             });

             //将td对象添加到tr对象，形成父子关系

             $tr.append($td1);

             $tr.append($td2);

             $tr.append($td3);

             //将tr对象添加到tbody对象，形成父子关系

             $("#tbodyID").append($tr);

             //清空原用户名和密码框

             $("#usernameID").val("");

             $("#passwordID").val("");

           }else{

             window.alert("用户名和密码必填");

           }

       });

   </script>

 </html>

jquery添加用户 事例的更多相关文章

  1. jquery.validate.js使用说明——后台添加用户邮箱功能：非空、不能重复、格式正确

    重点内容为:  jQuery验证控件jquery.validate.js使用说明+中文API[http://www.tuicool.com/articles/iABvI3] 简单教程可以参考[jQue ...

  2. 为jQuery添加Webkit的触摸方法支持

    前些日子收到邮件,之前兼职的一个项目被转给了其他人,跟进的人来问我相关代码的版权问题. 我就呵呵了. 这段代码是我在做13年一份兼职的时候无聊加上去的,为jQuery添加触摸事件的支持.因为做得有点无 ...

  3. Struts2+AJAX+JQuery 实现用户登入与注册功能。

    要求 必备知识 JAVA/Struts2,JS/JQuery,HTML/CSS基础语法. 开发环境 MyEclipse 10 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 关于U ...

  4. Struts2+AJAX+JQuery 实现用户登入与注册功能

    要求:必备知识:JAVA/Struts2,JS/JQuery,HTML/CSS基础语法:开发环境:MyEclipse 10 关于UI部分请查看下列链接,有详细制作步骤: 利用:before和:afte ...

  5. 添加用户的jsp页面

    <%@ page contentType="text/html;charset=UTF-8" language="java" %><!-- H ...

  6. IdentityServer4 使用OpenID Connect添加用户身份验证

    使用IdentityServer4 实现OpenID Connect服务端,添加用户身份验证.客户端调用,实现授权. IdentityServer4 目前已更新至1.0 版,在之前的文章中有所介绍.I ...

  7. [CentOs7]搭建ftp服务器(2)——添加用户

    摘要 上篇文章完成了ftp服务器的安装与匿名访问的内容,当然出于安全的考虑是不允许匿名访问服务器的,所以就有了本篇的内容 ,为ftp服务器添加用户,用改用户进行访问. vsftpd添加用户 FTP用户 ...

  8. sh3.useradd 添加用户脚本

    1.写一个脚本: 添加10个用户user1到user10,密码同用户名,但要求只有用户不存在的情况下才能添加 #/bin/bash # ..};do if id user$i &> /d ...

  9. MySQL添加用户、删除用户与授权

    MySql中添加用户,新建数据库,用户授权,删除用户,修改密码(注意每行后边都跟个;表示一个命令语句结束): 1.新建用户 1.1 登录MYSQL: @>mysql -u root -p @&g ...

随机推荐

  1. [翻译] ADPopupView 触摸弹出视窗

    ADPopupView 触摸弹出视窗 https://github.com/Antondomashnev/ADPopupView ADPopupView is an iOS drop-in class ...

  2. dwz ajax session超时跳转登录页（struts2自定义拦截器）

    1.定义struts2拦截器(网上例子很多) 代码如下: package rt.intercepter; import java.util.Map; import javax.servlet.http ...

  3. Linux下安装Oracle的过程和涉及的知识点-系列6

    16.一路安装后.会提示下面界面.此时须要用root登录下面文件夹,然后运行这两个脚本. 至此,Oracle软件的安装就已经完毕了,接下来就能够创建数据库了. 17.选择自己定义数据库: 输入数据库名 ...

  4. HostMonitor监控主机状态

    HostMonitor 可以对windows和linux下的主机进行很多信息的监控,还提供web方式查看

  5. HashTable HashMap HashSet区别(java)

    Hashtable: 1. key和value都不许有null值 2. 使用enumeration遍历 3. 同步的,每次只有一个线程能够访问 4. 在java中Hashtable是H大写,t小写,而 ...

  6. Longest Valid Parentheses leetcode java

    题目: Given a string containing just the characters '(' and ')', find the length of the longest valid ...

  7. Template Method 模板方法 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. 使用Spring Security和OAuth2实现RESTful服务安全认证

    这篇教程是展示如何设置一个OAuth2服务来保护REST资源. 源代码下载github. (https://github.com/iainporter/oauth2-provider)你能下载这个源码 ...

  9. GO语言基础map与函数

    1. map 1. 类似其它语言中的哈希表活着字典,以 key-value 形式存储数据 2. key 必须是支持 == 或 != 比较运算的类型,不可以是函数.map 或 slice 3. map ...

  10. MongoDB学习笔记（一）--基础

    Insert                                                                                        MongoD ...