js实现表格的全选，反选，删除所选行以及隔行变色

最新推荐文章于 2018-09-15 16:40:28 发布
最新推荐文章于 2018-09-15 16:40:28 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zunguitiancheng/article/details/46658633
版权



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Untitled Document</title>
        
        
        <style type="text/css">

            table{
                    border:#249bdb 1px solid;
                    width:500px;
                    border-collapse:collapse;
            }
            table td{
                    border:#249bdb 1px solid;
                    padding:5px;
            }
            table th{
                    border:#249bdb 1px solid;
                    padding:5px;
                    background-color: rgb(200,200,200);
            }

            .one{
                background-color:#9bf7d5;
            }
            .two{
                background-color:#f3e99a;
            }
            .over{
                background-color:#ef7125;
            }
        </style>
        
        <script type="text/javascript">
            //行颜色间隔显示功能。
            var name;
            function trColor(){
                //1,获取表格对象。
                var oTabNode = document.getElementById("mailtable");
                
                //2，获取行对象。
                var collTrNodes = oTabNode.rows;
                
                //3，对所有需要设置背景的行对象进行遍历。
                for(var x=1; x<collTrNodes.length-1;x++){
                    
                    if(x%2==1){
                        collTrNodes[x].className = "one";
                    }else{
                        collTrNodes[x].className = "two";
                    }
                    
                    collTrNodes[x].onmouseover = function(){
                        name = this.className;
                        this.className = "over";
                    }
                    collTrNodes[x].onmouseout = function(){
                        this.className = name;
                    }
                }
            }
            
            onload = function(){
                trColor();
            }
            
            
            
            //复选框的全选动作。
            function checkAll(node){
                
                //获取所有的mail复选框。
                var collMailNodes = document.getElementsByName("mail");
                
                for(var x=0; x<collMailNodes.length; x++){
                    
                    collMailNodes[x].checked = node.checked;
                }
                
            }
            
            
            //定义操作复选框按钮的方法。
            function checkAllByBut(num){
                
                var collMailNodes = document.getElementsByName("mail");
                
                for(var x=0; x<collMailNodes.length; x++){
                    
                    if(num>1)
                        collMailNodes[x].checked = !collMailNodes[x].checked;
                    else
                        collMailNodes[x].checked = num;
                }
                
            }
            
            
            
            //删除所选邮件。
            function deleteMail(){
                
                if (!confirm("你真的要删除所选的邮件吗？")){
                    return;
                }
                
                //获取所有的mail节点
                var collMailNodes = document.getElementsByName("mail");
                
                for (var x = 0; x < collMailNodes.length; x++) {
                
                    if (collMailNodes[x].checked) {
                    
                        var oTrNode = collMailNodes[x].parentNode.parentNode;
                        oTrNode.parentNode.removeChild(oTrNode);
                        x--;
                    }                    
                }
                
                trColor();
            }
        </script>
        
    </head>
    <body>
        
    <table id="mailtable">
    <tr>
        <th>
            <input type="checkbox" name="all" οnclick="checkAll(this)"  />全选
        </th>
        <th>
            发件人
        </th>
        <th>
            邮件名称
        </th>
        <th>
            邮件附属信息
        </th>
    </tr>
    
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三11
        </td>
        <td>
            我是邮件11
        </td>
        <td>
            我是附属信息11
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三22
        </td>
        <td>
            我是邮件22
        </td>
        <td>
            我是附属信息22
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三33
        </td>
        <td>
            我是邮件33
        </td>
        <td>
            我是附属信息33
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三44
        </td>
        <td>
            我是邮件44
        </td>
        <td>
            我是附属信息44
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三55
        </td>
        <td>
            我是邮件55
        </td>
        <td>
            我是附属信息55
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三66
        </td>
        <td>
            我是邮件66
        </td>
        <td>
            我是附属信息66
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三117
        </td>
        <td>
            我是邮件117
        </td>
        <td>
            我是附属信息17
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三118
        </td>
        <td>
            我是邮件118
        </td>
        <td>
            我是附属信息118
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三119
        </td>
        <td>
            我是邮件119
        </td>
        <td>
            我是附属信息119
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三1100
        </td>
        <td>
            我是邮件110
        </td>
        <td>
            我是附属信息110
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三11a
        </td>
        <td>
            我是邮件11a
        </td>
        <td>
            我是附属信息11a
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三11b
        </td>
        <td>
            我是邮件11b
        </td>
        <td>
            我是附属信息1b1
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三11c
        </td>
        <td>
            我是邮件11c
        </td>
        <td>
            我是附属信息11c
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三11d
        </td>
        <td>
            我是邮件11d
        </td>
        <td>
            我是附属信息11d
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        </td>
        <td>
            张三11e
        </td>
        <td>
            我是邮件11e
        </td>
        <td>
            我是附属信息11e
        </td>
    </tr>
    <tr>
        <th>
            <input type="checkbox" name="all" οnclick="checkAll(this)"  />全选
        </th>
        <th colspan="3">
            <input type="button" value="全选" οnclick="checkAllByBut(1)" />
            <input type="button" value="取消全选" οnclick="checkAllByBut(0)"  />
            <input type="button" value="反选" οnclick="checkAllByBut(2)"  />
            <input type="button" value="删除所选附件" οnclick="deleteMail()" />
        </th>
    </tr>
</table>
    </body>
</html>


简单的绿竹
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS全选反选及节点操作实现收件箱案例
zxh996的博客
07-09 291
JS全选反选及节点操作实现收件箱案例前言一、全选反选之商品选择二、节点操作之留言板（添加、删除）三、综合案例1.收件箱2.文本上下移动添加及删除功能总结 前言 JavaScript中的节点操作是一处重要的知识点，在很多的地方都有它的身影，我按照自己之前的学习，整理了一些节点操作的案例，用于加强学习和理解，仅供参考学习。 一、全选反选之商品选择 代码如下（示例）： <style> * { padding: 0; margi
JS实现全选反选全不选
06-18
JS实现全选反选全不选
js删除全选反选隔行变色
9960607的博客
11-13 290
table { border: #249bdb 1px solid; width: 500px; border-collapse: collapse; } table td { border: #249bdb 1px solid; padding: 5px; } table th { border: #249bdb 1px solid; padding: 5px;
jQuery操作表格——全选、反选、选择奇数行、隔行变色、删除行、添加行。
bailaoshi666的博客
09-15 888
&lt;html&gt; &lt;head&gt; &lt;title&gt;jQuery操作表格&lt;/title&gt; &lt;meta charset="UTF-8"/&gt; &lt;!-- jQuery学习的内容： 1、jQuery的封装原理（闭包，匿名自调用） ..
jQuery实现表格隔行变色，以及全选按钮，全不选按钮，反选按钮
ytm1996的博客
05-15 251
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;&lt;/title&gt;        &lt;style type="text/css"&gt;            .oddTr {  
实现隔行变色效果升级以及实现表格全选、反选、删除效果
02-29 663
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 实现隔行变色效果升级以及全选、反选、效果 .top{  background-color:#3CC;  color:#F30;} table{   border:solid 1px #00C;
jQuery实现table隔行变色、鼠标移上变色、全选 取消全选 反选
Hello World
05-25 200
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
Always believe that something wonderful happen
10-30 1743
代码：：： js实现表格隔行变色效果 .top{     background-color:#F93;     color:#30C;} table{     border:1px #000 dashed;     border-collapse:collapse; /*border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准
javascript表格操作大全：表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。（IE、火狐都兼容）
github_36111469的博客
11-21 807
表格.html [javascript] view plain copy  print? "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   "http://www.w3.org/1999/xht
jquery实现表格隔行换色、锁定单元行、荧光棒、全选反选特效
fisea的专栏
06-01 1935
<script type="text/javascript"> $(function(){ $("table tr:even").addClass("tdOdd"); $("th:first").css("background","#B4C6C1");//首个 $("table tr").mouseover(function(){ $(this).addClass("tdOver");}).mouseout(function(){ $(this).removeClass("tdOve
vue2.0在table中实现全选和反选的示例代码
08-28
在 `home.vue` 文件中，我们可以看到使用 JavaScript 实现全选和反选的逻辑，并使用 `v-on` 指令来绑定事件。 本示例代码展示了 Vue 2.0 中实现 Table 全选和反选的示例代码，并介绍了相关的知识点，包括使用 Vue ...
简单js实现全选全部选反选效果
11-11
在JavaScript编程中，全选和反选功能是常见的交互元素，尤其在表格或者多选列表中，用户往往希望一键选择或取消所有选项。本话题将深入探讨如何利用JavaScript实现这样的功能，以提升用户体验。 首先，我们需要理解...
javaScript实现复选框全选反选事件详解
10-19
主要为大家详细介绍了javaScript实现复选框全选反选事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
实现table表格checkbox复选框的全选 反选
11-11
接下来，我们使用JavaScript（通常配合jQuery库，但也可以使用原生JS）来实现全选/反选功能。这里我们使用jQuery： ```javascript $(document).ready(function() { $('#selectAll').click(function() { if ($...
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
js实现复选框全选反选
04-09
可以使用以下Javascript代码实现复选框全选反选： 全选： ``` function selectAll(){ var checkboxes = document.getElementsByName("checkbox"); for(var i=0;i;i++){ checkboxes[i].checked = true; } } ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值