<!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. 如何搭建 LNMP环境

    和LAMP不同的是LNMP中的N指的是是Nginx(类似于Apache的一种web服务软件)其他都一样.目前这种环境应用的也是非常之多. Nginx设计的初衷是提供一种快速高效多并发的web服务软件. ...

  2. 使用Artful MySQL模块出错

    总是报错: root@gitlab:/opt# newlisp newLISP v.10.6.0 64-bit on Linux IPv4/6 UTF-8 libffi, options: newli ...

  3. Hashing图像检索源码及数据库总结

    下面的这份哈希算法小结来源于本周的周报,原本并没有打算要贴出来的,不过,考虑到这些资源属于关注利用哈希算法进行大规模图像搜索的各位看官应该很有用,所以好东西本小子就不私藏了.本资源汇总最主要的收录原则 ...

  4. 【屌丝程序的口才逆袭演讲稿50篇】第十三篇：爱迪生欺骗了我们！【张振华.Jack】

    演讲稿主题:<爱迪生欺骗了我们>                      --作者:张振华Jack.摘抄<马云为雅虎员工的演讲稿:爱迪生欺骗了我们> 非常多人都记得爱迪生说的 ...

  5. Objective-C：异常的处理

    // // main.m // 03-动态绑定 // // Created by mac on 15/8/11. // Copyright (c) 2015年. All rights reserved ...

  6. Informatica 常用组件Lookup之二 已连接和未连接的查找

    可以配置一个已连接的查找转换,以从映射管道中直接接收输入:您也可以配置一个未连接的查找转换,以从其它转换的表达式结果中接收输入. 已连接的查找 未连接的查找 直接从管道接收输入值. 从其它转换的 :L ...

  7. 为什么谷歌的JSON响应以while(1);开头？

    问题(QUESTION): 我有个问题一直很好奇就是:为什么谷歌的JSON响应以while(1);开头?举个例子,当把谷歌日历打开和关掉时,会返回这样的JSON对象: while(1);[['u',[ ...

  8. Golang 中错误与异常需要重新认识

    如何进行错误处理,这是一个Go程序员之间,特别是一些新的Go程序员,会经常讨论的问题.讨论到最后往往由于以下代码的多次出现而变成了抱怨. if err != nil { return err } 我们 ...

  9. IIS-将iis直接指向.net代码会出现错误

    这是由于没有bin文件导致的,将bin文件加上之后就可以了.

  10. nginx rewrite only specific servername to https

    需求: 把某个域名的80端口服务  ----> 重定向转到 这个域名的 443端口的服务.   server { listen 80; server_name xxx.abcd.com.cn; ...