您的位置：首页 > Web前端 > JQuery

JQuery应用案例--自动增加行

2013-09-05 21:39 429 查看
使用JQuery实现自动增加行的功能。如下图，输入文本框内输入用户名和密码，点击增加，上方的表格就生成一行包含刚才输入的用户名和密码，并且还有删除本行的按钮。



代码：

<!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>
<center>
<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" />
</center>
</body>
<script type="text/javascript">
$(function(){
//将光标定位到用户名文本框
$("#usernameID").focus();
});

$("#addID").click(function() {
//创建行
var $tr = $("<tr></tr>");
//获取文本框中的用户名和密码，并将其添加到行中
$tr.append($("<th>" + $("#usernameID").val() + "</th>"));
$tr.append($("<th>" + $("#passwordID").val() + "</th>"));
//创建删除按钮
var $del = $("<th><input type='button' value='删除' id='delID'></th>");
//向行中添加删除按钮
$tr.append($del);
//创建删除事件
$del.click(function() {
$tr.remove();
});
//将创建的行添加到表格中
$("#tbodyID").append($tr);

//添加完之后将文本框清空
$("#usernameID").val("");
$("#passwordID").val("");
});
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航