使用JQuery实现全选、反选、添加和删除功能
2013-05-06 19:12
791 查看
练习要求：
1.班级 姓名 薪水 就业单位 是否转正
2.全选，取消全选，反选
3.实现删除功能：删除一行或多行
4.实现添加功能。添加一行。
<head>
<title></title>
<style type="text/css">
table
{
width: 600px;
height: 400px;
}
table tr td
{
border: solid 1px #eee;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
///////////////全选/////////////////
$(function () {
$("#Checkbox7").click(function () {
if ($("#chooseall").text() == "全选") {
$("table :checkbox").attr("checked", true);
$("#chooseall").text("取消全选");
}
else {
$("table :checkbox").attr("checked", false);
$("#chooseall").text("全选");
}
});
/////////////////反选//////////////////////////
$("#Checkbox8").click(function () {
$("table :checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
});
////////////////删除/////////////////////////////
$("#Button1").click(function () {
$("table input:checked").each(function () {
$(this).parent().parent().remove();
})
});
///////////////增加////////////////////
$("#Button2").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="Checkbox7" type="checkbox" /><span id="chooseall">全选</span><input id="Checkbox8"
type="checkbox" />反选<input id="Button1" type="button" value="删除" /></div>
<table>
<tr>
<td id="tdd">
操作
</td>
<td>
班级
</td>
<td>
姓名
</td>
<td>
薪水
</td>
<td>
就业单位
</td>
<td>
是否转正
</td>
</tr>
<tr>
<td>
<input id="Checkbox1" type="checkbox" />
</td>
<td>
001
</td>
<td>
齐志超
</td>
<td>
4000
</td>
<td>
河软CSDN</td>
<td>
否</td>
</tr>
<tr>
<td>
<input id="Checkbox2" type="checkbox" />
</td>
<td>
002
</td>
<td>
刘晓飞
</td>
<td>
5000
</td>
<td>
大河软</td>
<td>
否</td>
</tr>
<tr>
<td>
<input id="Checkbox3" type="checkbox" />
</td>
<td>
003
</td>
<td>
张东
</td>
<td>
3333
</td>
<td>
保定学院</td>
<td>
是</td>
</tr>
<tr>
<td>
<input id="Checkbox4" type="checkbox" />
</td>
<td>
004
</td>
<td>
小康
</td>
<td>
6677
</td>
<td>
谷歌</td>
<td>
否
</td>
</tr>
<tr>
<td>
<input id="Checkbox5" type="checkbox" />
</td>
<td>
005
</td>
<td>
小昂</td>
<td>
2850
</td>
<td>
百度</td>
<td>
是</td>
</tr>
<tr>
<td>
<input id="Checkbox6" type="checkbox" />
</td>
<td>
006
</td>
<td>
王瑞
</td>
<td>
3990
</td>
<td>
IBM</td>
<td>
否</td>
</tr>
</table>
<p>班级:<input id="Text1" type="text" />姓名:<input id="Text2" type="text" />薪水:<input
id="Text3" type="text" /></p>
<p>就业单位:<input id="Text4" type="text" />是否转正:<input id="Text5" type="text" /></p>
<p><input id="Button2" type="button" value="增加" /></p>
</body>
</html>
运行效果如下图：
当我点击全选按钮时，全选变为取消全选，同时下面的复选框全部选中；
下面我选中前三个，然后点击反选按钮，就是下一张图片的效果；
前三个复选框没有选中，后面的全部选中；
我点击删除按钮，刚才选中的全部删除了，就剩下了刚才没有选中的几个复选框及其内容；
然后再在下面的文本框内添加相应的内容，效果如图；
1.班级 姓名 薪水 就业单位 是否转正
2.全选，取消全选，反选
3.实现删除功能：删除一行或多行
4.实现添加功能。添加一行。
<head>
<title></title>
<style type="text/css">
table
{
width: 600px;
height: 400px;
}
table tr td
{
border: solid 1px #eee;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
///////////////全选/////////////////
$(function () {
$("#Checkbox7").click(function () {
if ($("#chooseall").text() == "全选") {
$("table :checkbox").attr("checked", true);
$("#chooseall").text("取消全选");
}
else {
$("table :checkbox").attr("checked", false);
$("#chooseall").text("全选");
}
});
/////////////////反选//////////////////////////
$("#Checkbox8").click(function () {
$("table :checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
});
////////////////删除/////////////////////////////
$("#Button1").click(function () {
$("table input:checked").each(function () {
$(this).parent().parent().remove();
})
});
///////////////增加////////////////////
$("#Button2").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="Checkbox7" type="checkbox" /><span id="chooseall">全选</span><input id="Checkbox8"
type="checkbox" />反选<input id="Button1" type="button" value="删除" /></div>
<table>
<tr>
<td id="tdd">
操作
</td>
<td>
班级
</td>
<td>
姓名
</td>
<td>
薪水
</td>
<td>
就业单位
</td>
<td>
是否转正
</td>
</tr>
<tr>
<td>
<input id="Checkbox1" type="checkbox" />
</td>
<td>
001
</td>
<td>
齐志超
</td>
<td>
4000
</td>
<td>
河软CSDN</td>
<td>
否</td>
</tr>
<tr>
<td>
<input id="Checkbox2" type="checkbox" />
</td>
<td>
002
</td>
<td>
刘晓飞
</td>
<td>
5000
</td>
<td>
大河软</td>
<td>
否</td>
</tr>
<tr>
<td>
<input id="Checkbox3" type="checkbox" />
</td>
<td>
003
</td>
<td>
张东
</td>
<td>
3333
</td>
<td>
保定学院</td>
<td>
是</td>
</tr>
<tr>
<td>
<input id="Checkbox4" type="checkbox" />
</td>
<td>
004
</td>
<td>
小康
</td>
<td>
6677
</td>
<td>
谷歌</td>
<td>
否
</td>
</tr>
<tr>
<td>
<input id="Checkbox5" type="checkbox" />
</td>
<td>
005
</td>
<td>
小昂</td>
<td>
2850
</td>
<td>
百度</td>
<td>
是</td>
</tr>
<tr>
<td>
<input id="Checkbox6" type="checkbox" />
</td>
<td>
006
</td>
<td>
王瑞
</td>
<td>
3990
</td>
<td>
IBM</td>
<td>
否</td>
</tr>
</table>
<p>班级:<input id="Text1" type="text" />姓名:<input id="Text2" type="text" />薪水:<input
id="Text3" type="text" /></p>
<p>就业单位:<input id="Text4" type="text" />是否转正:<input id="Text5" type="text" /></p>
<p><input id="Button2" type="button" value="增加" /></p>
</body>
</html>
运行效果如下图：
当我点击全选按钮时，全选变为取消全选，同时下面的复选框全部选中；
下面我选中前三个，然后点击反选按钮，就是下一张图片的效果；
前三个复选框没有选中，后面的全部选中；
我点击删除按钮，刚才选中的全部删除了，就剩下了刚才没有选中的几个复选框及其内容；
然后再在下面的文本框内添加相应的内容，效果如图；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery实现全选、反选以及删除、添加等功能
- 使用vue.js实现checkbox的全选和多个的删除功能
- 使用jquery实现购物车的添加与删除。
- 使用jQuery实现一个类似GridView的编辑，更新，取消和删除的功能
- 用jquery实现全选/全部选功能(jquery-1.9.x 版本以上)，使用 prop 属性
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版
- Jquery实现select multiple左右添加和删除功能
- JQuery实现添加删除数据全选反选隔行变色二级联动
- AngularJs实现添加,批量删除,全选,反选等功能
- 使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
- jQuery中实现全选功能时使用attr( )改变checked值只能生效一次的问题
- 使用JQuery实现全选的功能
- 利用jQuery实现全选、反选、删除和添加
- Jquery实现select multiple左右添加和删除功能
- 关于从后台传来的json数据，使用jquery动态展现所有的item，给每个item添加删除功能
- 用jQuery实现multiple select(列表框)左右添加和删除功能
- jQuery学习: 实现select multiple左右添加和删除功能
- jQuery学习: 实现select multiple左右添加和删除功能
- 1模拟网易邮箱实现全选，全不的功能（服务端和客户端） 2 使用DataList实现 加入购物车，编辑，删除，更新，取消功能。要求连一个产品表。