JQuery动态操作表格(添加、删除、多选、全选删除行操作)
2011-10-18 17:12
756 查看
JQery动态操作表格，能够实现 添加行，多选、全选行、删除行操作，这是一个很有参考价值的JQuery适时控制表格的一个功能，含有丰富的注释，方便大家研究学习。
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>JQuery单元格新增与删除</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//添加单元表格行信息
$("#saveInfo").bind("click",function(){
$("#tb").append("<tr align='center'><td><input type='checkbox'/></td><td>"+$("#UserName").val()+"</td><td>"+$("#PassWord").val()+"</td></tr>");
});
//重置用户添加信息
$("#deleteInfo").bind("click",function(){
$("#UserName").val("");//置用户名值为空
$("#PassWord").val("");//置密码值为空
});
//单元表格行全选
$("#SelectAll").bind("click",function(){
$("#tb tbody tr td input").attr("checked",true);
});
//删除单元格行信息
$("#Delete").bind("click",function(){
$("#tb tbody tr td input:checked").parent().parent().remove();
});
});
</script>
</head>
<body>
<table align="center" border="0">
<tr>
<td>用户名:</td><td><input type="text" id="UserName"/></td>
</tr>
<tr>
<td>密 码:</td><td><input type="text" id="PassWord"/></td>
</tr>
<tr>
<td><input type="button" value="确 认" id="saveInfo"/></td>
<td><input type="reset" value="重 置" id="deleteInfo"/></td>
</tr>
</table>
<table align="center" border="1" width="70%" id="tb">
<thead>
<tr>
<th><input type="button" id="SelectAll" value="全选"/> <input type="button" id="Delete" value="删除"/></th>
<th>用户名</th>
<th>密 码</th>
</tr>
</thead>
<tbody></tbody>
</table>
</table>
</html>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>JQuery单元格新增与删除</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//添加单元表格行信息
$("#saveInfo").bind("click",function(){
$("#tb").append("<tr align='center'><td><input type='checkbox'/></td><td>"+$("#UserName").val()+"</td><td>"+$("#PassWord").val()+"</td></tr>");
});
//重置用户添加信息
$("#deleteInfo").bind("click",function(){
$("#UserName").val("");//置用户名值为空
$("#PassWord").val("");//置密码值为空
});
//单元表格行全选
$("#SelectAll").bind("click",function(){
$("#tb tbody tr td input").attr("checked",true);
});
//删除单元格行信息
$("#Delete").bind("click",function(){
$("#tb tbody tr td input:checked").parent().parent().remove();
});
});
</script>
</head>
<body>
<table align="center" border="0">
<tr>
<td>用户名:</td><td><input type="text" id="UserName"/></td>
</tr>
<tr>
<td>密 码:</td><td><input type="text" id="PassWord"/></td>
</tr>
<tr>
<td><input type="button" value="确 认" id="saveInfo"/></td>
<td><input type="reset" value="重 置" id="deleteInfo"/></td>
</tr>
</table>
<table align="center" border="1" width="70%" id="tb">
<thead>
<tr>
<th><input type="button" id="SelectAll" value="全选"/> <input type="button" id="Delete" value="删除"/></th>
<th>用户名</th>
<th>密 码</th>
</tr>
</thead>
<tbody></tbody>
</table>
</table>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery动态操作表格(添加、删除、多选、全选删除行操作)
- 多选列表框动态添加,移动,删除,全选等操作的简单实例
- jQuery表格操作添加行、删除行和动态移动
- jQuery表格操作添加行、删除行和动态移动
- javascript表格操作大全：表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。（IE、火狐都兼容）
- javascript表格操作大全：表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。（IE、火狐都兼容）
- 多选列表框动态添加,移动,删除,全选等操作的简单实例
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
- js动态添加表格,全选和删除
- JavaScript动态操作表格实例(添加,删除行,列及单元格)
- 多选列表框动态添加，移动，删除，全选 等操作（完整实例）
- JavaScript动态操作表格实例(添加,删除行,列及单元格)
- jQuery操作动态生成的Checkbox，完成全选和反选，以删除某一行或几行
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- Jquery 实现动态添加table tr 和删除tr 以及checkbox的全选 和 获取添加TR删除TR后的数据
- 超级简单的jquery操作表格(添加/删除行、添加/删除列)
- JQuery动态添加和删除表格行的方法
- 原生JS和JQuery动态添加、删除表格行的方法
- jQuery为table表格动态添加或删除tr
- Jquery动态删除添加表格中的内容