使用JQuery实现全选、反选、添加和删除功能 |
您所在的位置:网站首页 › js实现全选和反选功能 › 使用JQuery实现全选、反选、添加和删除功能 |
练习要求: 1.班级 姓名 薪水 就业单位 是否转正 2.全选,取消全选,反选 3.实现删除功能:删除一行或多行 4.实现添加功能。添加一行。 table { width: 600px; height: 400px; } table tr td { border: solid 1px #eee; } ///全选/ $(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 = '' + txt1 + '' + txt2 + '' + txt3 + '' + txt4 + '' + txt5 + ''; $('table').append(str); }); }); 全选反选 操作 班级 姓名 薪水 就业单位 是否转正 001 齐志超 4000 河软CSDN 否 002 刘晓飞 5000 大河软 否 003 张东 3333 保定学院 是 004 小康 6677 谷歌 否 005 小昂 2850 百度 是 006 王瑞 3990 IBM 否 班级:姓名:薪水: 就业单位:是否转正: 运行效果如下图: 当我点击全选按钮时,全选变为取消全选,同时下面的复选框全部选中; 下面我选中前三个,然后点击反选按钮,就是下一张图片的效果; 前三个复选框没有选中,后面的全部选中; 我点击删除按钮,刚才选中的全部删除了,就剩下了刚才没有选中的几个复选框及其内容; 然后再在下面的文本框内添加相应的内容,效果如图; |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |