使用JQuery实现全选、反选、添加和删除功能

您所在的位置:网站首页 js实现全选和反选功能 使用JQuery实现全选、反选、添加和删除功能

使用JQuery实现全选、反选、添加和删除功能

2024-07-13 12:56| 来源: 网络整理| 查看: 265

练习要求:

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