JQuery对Table进行全选反选 增加节点 删除节点

最新推荐文章于 2020-07-29 16:20:22 发布
最新推荐文章于 2020-07-29 16:20:22 发布
阅读量970 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxfzgg/article/details/8889322
版权

<!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>

刘晓飞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0在table中实现全选和反选的示例代码
08-28
主要介绍了vue2.0在table中实现全选和反选的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery中表格全选反选demo
安静的对折的专栏
01-04 2742
使用jQuery实现一个简单的表格全选与反选的案例 * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; }
怎么把后台传过来的Json拼成table 用Jquery ajax()
dengefu4541的博客
09-07 165
页面上的表格定义：<table id="tableId"></table>js中的代码：var $parent0 = $('#tableId);//获取页面上id为tableId的table对象$parent0.append($("<tr><td>姓名</td><td>年龄</td></tr>...
纯Jquery表格全选+反选+增删查找
11-13
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
jquery table表格添加删除数据（含批量删除，全选全不选和简单的表单验证）
yedaiyang的博客
12-05 826
开始先导包... //先建立输入框和按钮 用户:  密码:  邮箱:         //建立一个表格             用户名    密码    邮箱    操作      //开始调用script方法   //获取添加按钮的ID并且设置点击事件   $("#tj").click(function(){ //获取用户名框的输入内容并且判断
Jquery 全选反选实例代码
11-25
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
jquery全选反选全不选案例
04-04
jquery实现全选反选全不选案例，在入场网页开发中实现。
jQuery图片列表全选反选代码
07-24
jQuery图片列表全选反选代码是一款手机端我的收藏页图片列表全选反选取消删除功能。
jquery复选框CHECKBOX全选、反选
01-19
使用方法:我们先把下面的JS保存为有个文件,到时候调用，淡然你也可以直接写在页面内,推荐使用前者,方便重用: 代码如下:(function($){ $.fn.checkgroup = function(options){ //merge settings settings=$.extend({ ...
jQuery-实现表格的全选反选
gxgalaxy
11-18 646
这里写自定义目录标题效果图需求源代码 效果图 需求 需求１：上面的多选框选中，下面的多选框跟着选中，上面的多选框没有选中，下面的多选框跟着不选中 需求２：下面的多选框都有单击事件 需求３：如果下面的多选框们都选中了，那么上面的那个多选框跟着选中，如果下面多选框有一个没有选中，那么上面的多选框也就不选中： 源代码 <!DOCTYPE html> <html lang="en"...
对表格进行批量操作如全选反选删除功能
@风之谷
10-06 962
<!DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> <title>Select All</title> <style> table{ border:#999 1px solid;
table双击td能修改内容
qq_38508172的博客
09-12 1639
此篇提供给需要的人。 说实话一般的前端框架的话都会自带这个功能，但是我也懒得去翻，自己手工写个，以后要用直接调用就OK了。 自己做的成果还是挺爽的。 废话不多说，上源码。 我们先引入jQuery： &lt;script type="text/javascript" src="js/jquery-2.1.1.js" &gt;&lt;/script&gt; PS:注意这个js引入的是我...
JQuery实现复选框CheckBox的全选、反选、提交操作
pan_junbiao的博客
07-29 2330
对复选框最基本的应用，就是对复选框进行全选、反选和提交等操作。复杂的操作需要与选项挂钩，来达到各种级联反应效果。 【示例】使用Jquery实现复选框CheckBox的全选、反选、提交操作。 （1）创建页面，创建一个表格在表格的第一列中放入一组复选框，并实现复选框的全选、反选、提交操作。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
table 表格的全选和反选
wbj16116的博客
07-03 929
<table class="layui-table"> <thead> <tr> <th style="width: 15px;"><input name="user_ids" type="ch...
子元素过滤选择器（获取父元素中指定的某个子元素）
刘晓飞
04-17 1339
子元素过滤选择器         ul{ list-style-type:none; width:600px; padding:0px;}     ul li{  border:solid 1px #eee;}     .class1{ background-color:Aqua;}                     $(function () {
jQuery实现图片展开缩放的效果
刘晓飞
04-16 1286
#img1         {             width: 500px;             height: 400px;             border: solid 1px #ccc;             display:none;         }                     $(function () {
用jquery写一个全选反选功能
最新发布
05-26
可以使用以下代码实现全选反选功能： HTML代码： ``` <input type="checkbox" id="checkAll"> 全选 <input type="checkbox" class="check"> 选项1 <input type="checkbox" class="check"> 选项2 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值