Jquery 实现表格全选 反选 取消全选 删除行 增加行
2013-05-06 19:38
603 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table img
{
width:50px; height:50px;
}
table
{
width:600px; height:400px;
}
table tr td{ border:solid 1px #eee;}
#img1
{
position:absolute;width:200px;height:200px;display:none;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#chkall').click(function () {
/*if ($(this).is(':checked') == true) {
$('table input[type=checkbox]').attr('checked', true);
}
else {
$('table input[type=checkbox]').attr('checked', false);
}*/
//简单写法
$('table input[type=checkbox]').attr('checked', $(this).is(':checked'));
if (this.checked) {
$('#sp1').text('取消全选');
}
else {
$('#sp1').text('全选');
}
//alert($('#chkall').attr('checked'));
//另一种方法，使用js获取全选复选框的选中状态
//$('table input[type=checkbox]').attr('checked',this.checked);
})
$('#chkrevert').click(function () {
//方法1：
/*var allcheck = $('table input[type=checkbox]');
for (var i = 0; i < allcheck.length; i++) {
if (allcheck[i].checked) {
allcheck[i].checked = false;
}
else {
allcheck[i].checked = true;
}
}*/
var allcheck = $('table input[type=checkbox]');
allcheck.each(function () {
if ($(this).is(':checked')) {
$(this).attr('checked', false);
}
else {
$(this).attr('checked', true);
}
})
})
$('#btnDelete').click(function () {
$('table input[type=checkbox]').each(function () {
if ($(this).attr("checked")) {
$(this).parent().parent().remove();
}
});
$('#btnAdd').click(function () {
$('table tr:last').after($('<tr><td><input type="checkbox" /></td><td></td><td></td><td></td><td></td><td></td></tr>'));
$('table tr:last td:eq(1)').text($('#txtClassName').val());
$('table tr:last td:eq(2)').text($('#StuName').val());
$('table tr:last td:eq(3)').text($('#Salary').val());
$('table tr:last td:eq(4)').text($('#txtEmployer').val());
$('table tr:last td:eq(5)').text($('#txtZhuanZheng').val());
})
})
</script>
</head>
<body>
<div>
<input id="chkall" type="checkbox" /><span id="sp1">全选</span><input id="chkrevert" type="checkbox" />反选</div>
<input id="btnDelete" type="button" value="删除" />
<input id="btnAdd" type="button" value="添加" /><br />
<table>
<tr>
<td>
操作
</td>
<td>
班级
</td>
<td>
姓名
</td>
<td>
薪水
</td>
<td>
就业单位
</td>
<td>
是否转正
</td>
</tr>
<tr>
<td>
<input id="Checkbox1" type="checkbox" />
</td>
<td>
.NET3班
</td>
<td>
祁宏霞
</td>
<td>
3000
</td>
<td>
北京新世纪公司
</td>
<td>
是
</td>
</tr>
<tr>
<td>
<input id="Checkbox2" type="checkbox" />
</td>
<td>
.PHP3班
</td>
<td>
苏少地
</td>
<td>
2345
</td>
<td>
北京联合公司
</td>
<td>
是
</td>
</tr>
<tr>
<td>
<input id="Checkbox3" type="checkbox" />
</td>
<td>
.JAVA班
</td>
<td>
李小
</td>
<td>
1234
</td>
<td>
保定科技公司
</td>
<td>
否
</tr>
<tr>
<td>
<input id="Checkbox4" type="checkbox" />
</td>
<td>
.3G班
</td>
<td>
曹雪芹
</td>
<td>
3456
</td>
<td>
保定财力公司
</td>
<td>
否
</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table img
{
width:50px; height:50px;
}
table
{
width:600px; height:400px;
}
table tr td{ border:solid 1px #eee;}
#img1
{
position:absolute;width:200px;height:200px;display:none;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#chkall').click(function () {
/*if ($(this).is(':checked') == true) {
$('table input[type=checkbox]').attr('checked', true);
}
else {
$('table input[type=checkbox]').attr('checked', false);
}*/
//简单写法
$('table input[type=checkbox]').attr('checked', $(this).is(':checked'));
if (this.checked) {
$('#sp1').text('取消全选');
}
else {
$('#sp1').text('全选');
}
//alert($('#chkall').attr('checked'));
//另一种方法，使用js获取全选复选框的选中状态
//$('table input[type=checkbox]').attr('checked',this.checked);
})
$('#chkrevert').click(function () {
//方法1：
/*var allcheck = $('table input[type=checkbox]');
for (var i = 0; i < allcheck.length; i++) {
if (allcheck[i].checked) {
allcheck[i].checked = false;
}
else {
allcheck[i].checked = true;
}
}*/
var allcheck = $('table input[type=checkbox]');
allcheck.each(function () {
if ($(this).is(':checked')) {
$(this).attr('checked', false);
}
else {
$(this).attr('checked', true);
}
})
})
$('#btnDelete').click(function () {
$('table input[type=checkbox]').each(function () {
if ($(this).attr("checked")) {
$(this).parent().parent().remove();
}
});
$('#btnAdd').click(function () {
$('table tr:last').after($('<tr><td><input type="checkbox" /></td><td></td><td></td><td></td><td></td><td></td></tr>'));
$('table tr:last td:eq(1)').text($('#txtClassName').val());
$('table tr:last td:eq(2)').text($('#StuName').val());
$('table tr:last td:eq(3)').text($('#Salary').val());
$('table tr:last td:eq(4)').text($('#txtEmployer').val());
$('table tr:last td:eq(5)').text($('#txtZhuanZheng').val());
})
})
</script>
</head>
<body>
<div>
<input id="chkall" type="checkbox" /><span id="sp1">全选</span><input id="chkrevert" type="checkbox" />反选</div>
<input id="btnDelete" type="button" value="删除" />
<input id="btnAdd" type="button" value="添加" /><br />
<table>
<tr>
<td>
操作
</td>
<td>
班级
</td>
<td>
姓名
</td>
<td>
薪水
</td>
<td>
就业单位
</td>
<td>
是否转正
</td>
</tr>
<tr>
<td>
<input id="Checkbox1" type="checkbox" />
</td>
<td>
.NET3班
</td>
<td>
祁宏霞
</td>
<td>
3000
</td>
<td>
北京新世纪公司
</td>
<td>
是
</td>
</tr>
<tr>
<td>
<input id="Checkbox2" type="checkbox" />
</td>
<td>
.PHP3班
</td>
<td>
苏少地
</td>
<td>
2345
</td>
<td>
北京联合公司
</td>
<td>
是
</td>
</tr>
<tr>
<td>
<input id="Checkbox3" type="checkbox" />
</td>
<td>
.JAVA班
</td>
<td>
李小
</td>
<td>
1234
</td>
<td>
保定科技公司
</td>
<td>
否
</tr>
<tr>
<td>
<input id="Checkbox4" type="checkbox" />
</td>
<td>
.3G班
</td>
<td>
曹雪芹
</td>
<td>
3456
</td>
<td>
保定财力公司
</td>
<td>
否
</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现表格全选、反选、删除一行或多行、增加一行
- jQuery增加和删除表格项目及实现表格项目排序的方法
- jquery 实现表格内的tr与td,动态添加与删除. 以及序号增加与减少，大多用在Form里
- jquery 实现简单的表格中增加或删除下一行
- 基于jquery的实现简单的表格中增加或删除下一行
- jQuery实现表格行的动态增加与删除
- js+jquery实现增加或删除表格中的一行数据
- 使用JS实现简单的表格的增加删除全选反选以及高亮效果
- 基于jquery的实现简单的表格中增加或删除下一行
- jQuery实现表格行的动态增加与删除
- [转]jQuery实现表格行的动态增加与删除(改进版)
- jQuery表格常用操作方法-增加，查询，删除，排序，移动，全选
- JQuery实现表格行的上移、下移、删除、增加
- jQuery实现表格的checkbox全选/取消全选
- 基于jquery的实现简单的表格中增加或删除下一行
- jQuery实现表格行的动态增加与删除(改进版)
- jQuery 实现表格最后增加一行和删除最后一行
- jQuery实现表格行的动态增加与删除
- jquery实现表格行的动态增加和删除
- jQuery表格常用操作方法-增加，查询，删除，排序，移动，全选