jquery添加用户 事例
2024-08-26 08:38:26
<!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>
最新文章
- GDB 多线程调试:只停止断点的线程,其他线程任然执行; 或只运行某些线程 其他线程中断
- Vertica 安装,建库,新建测试用户并授予权限,建表,入库
- Apache Shiro 学习记录4
- 生成模型(Generative)和判别模型(Discriminative)
- MillWheel: Fault-Tolerant Stream Processing at Internet Scale
- Java IO(四)
- fzu 2135 数字游戏 【水题】
- ios drawRect NSString 绘制
- JDK8环境变量配置相关问题
- js手写图片查看器(图片的缩放、旋转、拖拽)
- 深入学习 DUBBO
- 前端到后台ThinkPHP开发整站(6)
- Hadoop项目实战-用户行为分析之应用概述(三)
- scala 模式匹配详解 3 模式匹配的核心功能是解构
- Building designing UVA - 11039
- 下雨天,适合学「Spring Boot」
- android开发(45) 自定义软键盘(输入法)
- English trip -- VC(情景课) 8 A Get ready
- http请求报头
- HDU 4970
热门文章
- Quartz Job执行后再更新Job的时间表达式....
- restful处理
- 《3D打印:三维智能数字化创造(全彩)》
- iOS:UIToolBar、toolbarItems、BarButtonItem的几种关系
- hadoop fs:du &; count统计hdfs文件(目录下文件)大小的用法
- Word 代码高亮
- 【OpenCV新手教程之十七】OpenCV重映射 &;amp; SURF特征点检測合辑
- Handler具体解释系列(七)——Activity.runOnUiThread()方法具体解释
- 【转】允许远程用户登录访问mysql的方法
- es6-块级作用域let 和 var的区别