JQuery对Table进行全选反选 增加节点 删除节点
2013-05-06 10:26
351 查看
<!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
{
width:600px;
height:300px;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 全选
$('#CkcAll').click(function () {
$('table input[type=checkbox]').attr('checked', $(this).is(':checked'));
if (this.checked) {
$('#s1').text('取消全选');
}
else {
$('#s1').text('全选');
}
})
// 反选
$('#CkcFan').click(function () {
$('table input[type=checkbox]').each(function () {
if (this.checked) {
$(this).attr('checked', false);
}
else {
$(this).attr('checked', true);
}
})
})
$('#btdelete').click(function () {
$('table input:checked').each(function () {
$(this).parent().parent().remove();
})
})
$('#BtnAdd').click(function () {
var txt1 = $("#Text1").val();
var txt2 = $("#Text2").val();
var txt3 = $("#Text3").val();
var txt4 = $("#Text4").val();
var txt5 = $("#Text5").val();
var str = '<tr><td><input type="checkbox" /></td><td>' + txt1 + '</td><td>' + txt2 + '</td><td>' + txt3 + '</td><td>' + txt4 + '</td><td>' + txt5 + '</td></tr>';
$('table').append(str);
});
})
</script>
</head>
<body>
<div><input id="CkcAll" type="checkbox" /><span id="s1">全选</span><input id="CkcFan" type="checkbox" />反选<input
id="btdelete" type="button" value="删除" /></div>
<table id="t1">
<tr>
<td>操作</td>
<td>班级</td>
<td>姓名</td>
<td>薪水</td>
<td>就业单位</td>
<td>是否转正</td>
</tr>
<tr>
<td>
<input id="Checkbox1" type="checkbox" /></td>
<td>11Net</td>
<td>刘晓飞</td>
<td>4000</td>
<td>CSDN</td>
<td>是</td>
</tr>
<tr>
<td>
<input id="Checkbox2" type="checkbox" /></td>
<td>11Net</td>
<td>张东</td>
<td>4000</td>
<td>微软</td>
<td>否</td>
</tr>
<tr>
<td>
<input id="Checkbox3" type="checkbox" /></td>
<td>11Net</td>
<td>齐志超</td>
<td>3500</td>
<td>华为</td>
<td>是</td>
</tr>
</table>
<br />
<input id="Text1" type="text" /><br /><br />
<input id="Text2" type="text" /><br /><br />
<input id="Text3" type="text" /><br /><br />
<input id="Text4" type="text" /><br /><br />
<input id="Text5" type="text" /><br /><br />
<input id="BtnAdd" type="button" value="添加节点" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table
{
width:600px;
height:300px;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 全选
$('#CkcAll').click(function () {
$('table input[type=checkbox]').attr('checked', $(this).is(':checked'));
if (this.checked) {
$('#s1').text('取消全选');
}
else {
$('#s1').text('全选');
}
})
// 反选
$('#CkcFan').click(function () {
$('table input[type=checkbox]').each(function () {
if (this.checked) {
$(this).attr('checked', false);
}
else {
$(this).attr('checked', true);
}
})
})
$('#btdelete').click(function () {
$('table input:checked').each(function () {
$(this).parent().parent().remove();
})
})
$('#BtnAdd').click(function () {
var txt1 = $("#Text1").val();
var txt2 = $("#Text2").val();
var txt3 = $("#Text3").val();
var txt4 = $("#Text4").val();
var txt5 = $("#Text5").val();
var str = '<tr><td><input type="checkbox" /></td><td>' + txt1 + '</td><td>' + txt2 + '</td><td>' + txt3 + '</td><td>' + txt4 + '</td><td>' + txt5 + '</td></tr>';
$('table').append(str);
});
})
</script>
</head>
<body>
<div><input id="CkcAll" type="checkbox" /><span id="s1">全选</span><input id="CkcFan" type="checkbox" />反选<input
id="btdelete" type="button" value="删除" /></div>
<table id="t1">
<tr>
<td>操作</td>
<td>班级</td>
<td>姓名</td>
<td>薪水</td>
<td>就业单位</td>
<td>是否转正</td>
</tr>
<tr>
<td>
<input id="Checkbox1" type="checkbox" /></td>
<td>11Net</td>
<td>刘晓飞</td>
<td>4000</td>
<td>CSDN</td>
<td>是</td>
</tr>
<tr>
<td>
<input id="Checkbox2" type="checkbox" /></td>
<td>11Net</td>
<td>张东</td>
<td>4000</td>
<td>微软</td>
<td>否</td>
</tr>
<tr>
<td>
<input id="Checkbox3" type="checkbox" /></td>
<td>11Net</td>
<td>齐志超</td>
<td>3500</td>
<td>华为</td>
<td>是</td>
</tr>
</table>
<br />
<input id="Text1" type="text" /><br /><br />
<input id="Text2" type="text" /><br /><br />
<input id="Text3" type="text" /><br /><br />
<input id="Text4" type="text" /><br /><br />
<input id="Text5" type="text" /><br /><br />
<input id="BtnAdd" type="button" value="添加节点" />
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQUERY方法给TABLE动态增加 删除行
- html table insert/delete rows（Table的行进行增加/删除）
- JQuery操作table中checkbox全选删除，图片放大浏览效果。
- js+jQuery获取全选并用ajax进行批量删除
- 使用jQuery对页面元素（或者标签）进行Dom操作（增加和删除），电力项目
- jquery 动态添加table与删除动态增加tr,table
- jquery 节点的创建增加 节点删除 替换
- jquery判断select中是否存在某个value以及进行增加、删除操作
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
- 使用jquery操作table元素：增加或删除一行
- jQuery增加与删除table列的方法
- jQuery增加与删除table列的方法
- jquery table表格添加删除数据（含批量删除，全选全不选和简单的表单验证）
- 使用jquery增加、删除html文档节点
- jquery select 删除 增加节点
- Jquery 实现表格全选 反选 取消全选 删除行 增加行
- jQuery控制table进行添加和删除
- jQuery表格常用操作方法-增加，查询，删除，排序，移动，全选