jQuery实现表格全选、反选、删除一行或多行、增加一行

最新推荐文章于 2022-11-30 15:54:59 发布
最新推荐文章于 2022-11-30 15:54:59 发布
阅读量1w 收藏 1
点赞数 2
分类专栏： jQuery 文章标签： jQuery CheckBox 增加一行 删除多行 全选反选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu_111111/article/details/8891415
版权
<head>
    <title></title>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <style type="text/css">
        
        table tr td
        {
            border: solid 1px #eee;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('#Checkbox7').click(function () {
                if ($(this).attr("checked")) {//全选
                    $('table input[type=checkbox]').attr('checked', true);
                    $('span').text('取消全选');
                }
                else {
                    $('table input[type=checkbox]').attr('checked', false);
                    $('span').text('全选');
                }
            })


            $("#Checkbox8").click(function () {//反选  
                $('table input[type=checkbox]').each(function () {


                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });


            $('#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="Checkbox7" type="checkbox" /><span>全选</span><input id="Checkbox8" type="checkbox" />反选&nbsp;
        <input id="btnDelete" type="button" value="删除" />&nbsp;
        <input id="btnAdd" type="button" value="添加" /><br />
        班级<input id="txtClassName" type="text"/><br />
        姓名<input id="StuName" type="text" /><br />
        薪水<input id="Salary" type="text" /><br />
        工作单位<input id="txtEmployer" type="text" /><br />
        是否转正<input id="txtZhuanZheng" type="text" /></div>
  
    <table>
        <tr>
            <td>
                操作
            </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>
                国企
            </td>
            <td>
                是</td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox2" type="checkbox" />
            </td>
            <td>
                002
            </td>
            <td>
                张二</td>
            <td>
                4000
            </td>
            <td>
                国企
            </td>
            <td>
                否
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox3" type="checkbox" />
            </td>
            <td>
                003
            </td>
            <td>
                张三</td>
            <td>
                4000
            </td>
            <td>
                国企
            </td>
            <td>
                是
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox4" type="checkbox" />
            </td>
            <td>
                004
            </td>
            <td>
                张四
            </td>
            <td>
                4000
            </td>
            <td>
                国企
            </td>
            <td>
                否
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox5" type="checkbox" />
            </td>
            <td>
                005
            </td>
            <td>
                张五
            </td>
            <td>
                4000
            </td>
            <td>
                国企
            </td>
            <td>
                是
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox6" type="checkbox" />
            </td>
            <td>
                006
            </td>
            <td>
                张六
            </td>
            <td>
                4000
            </td>
            <td>
                国企
            </td>
            <td>
                否
            </td>
        </tr>
    </table>
</body>
liu_111111
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯Jquery表格全选+反选+增删查找
11-13
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
关于easyui 表格选中之后翻页，选中行莫名变多问题
菜鸟园
01-03 195
选中2行数据，进行翻页。提交数据的时候发现选中行变成了17（选中行数+页面总行数），并且自动选中了页面的第一行数据。 经过网上搜索，没有看到有相同的问题，于是将本次问题记录下来，希望对其他人有所帮助。 经过排查，发现是在idField这里错了，数据列是大写ID，idField是小写id，这里不一致造成上面的问题。将这里改成一样的就可以了。 问题解决： ...
jquery ui选中表格多行数据
colorsunlight的专栏
03-30 1753
<script src="../public/js/jquery-1.8.3.js"></script> <script src="../public/js/jquery-ui-1.10.4.custom.js"></script> <script src="../public/js/jquery-ui.js"></script> <link rel="style/css" href="../pub
jQuery 删除表格中选中的行
weixin_41909210的博客
10-10 2541
$("#tableId").click(function () {/** 批量删除*/ $("input:checkbox[name='checkBox']:checked").each(function () {// 遍历选中的checkbox var n = $(this).parents("tr").index(); // 获取checkbox所在...
jQuery实现table的全选和删除
qq_36702286的博客
11-30 548
table 多选 删除 总计
利用JQuery实现表格的全选/全不选及子项与总项的联动
zn740238424的博客
08-31 347
表格的全选与全不选及 ① 全选状态下取消一个子项，总项就被取消。② 全部子项都被勾选时，总项自动勾选。
Jquery实现表单的“全选”，“全部不选”功能
weixin_51474578的博客
07-20 1984
希望帮助到你！！！
jQuery表格行全选反选单选代码
09-17
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
jQuery表格行全选反选单选特效代码
03-20
jQuery表格行全选反选单选代码是一款基于tableCheckbox.js插件实现的，鼠标点击表格行时候能选中行内的复选框，且当前行会高亮显示，支持shift多
Jquery表格行全选反选
06-01
Jquery表格行全选反选
实现二维表头
12-08
.net WindowForm窗体编程,C#利用DataGridView控件实现二维表头
jQuery实现table表格checkbox全选的方法分析
12-04
本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考，具体如下： 今天在页面中使用jQuery实现了全选框操作，如图： 具体的实现过程很简单： 第一步 设计一个简单的表格： 设置表格列标题，在列标题中的单选框为全选框； 设置表格题，表格题的单选框就是普通的单选框啦： <table> <thead> <tr> <td> <input type="checkbox" onclick="selectAll(this.checked)" /> </td> </tr>
jquery实现全选、反选、获得所有选中的checkbox
11-26
1、全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }...
jQuery实现的表格行全选反选单选特效源码.zip
11-18
jQuery实现的表格行全选反选单选特效源码.zip
AJAX实现用户登录
liu_111111的专栏
05-20 6481
-----------------------WebService1--------------------------------  // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。     [System.Web.Script.Services.ScriptService]     public class WebService1 :
AJAX获取服务器当前时间
liu_111111的专栏
05-20 3442
------------------------------ WebService1.asmx---------------------------------- // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。     [System.Web.Script.Services.ScriptService]     public class We
animate动画效果（泪奔的小孩）stop和delay的用法
liu_111111的专栏
05-06 3130
img     {         width:150px;         height:200px;         position:relative;         }        td{width:150px;height:200px;}     table{border:solid 1px black;}                 $(function
jQuery根据纬度经度查看地图
liu_111111的专栏
05-07 2724
//在这里要注意js的引入顺序                                             $(function () {         function latlong() {             return new google.maps.LatLng($("#lat").val(), $
jquery实现全选和反选
最新发布
05-18
可以使用以下代码实现全选和反选的功能： ```javascript // 全选 $("#checkAll").click(function(){ $("input[type='checkbox']").prop("checked", true); }); // 反选 $("#checkReverse").click(function(){ $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值