<!DOCTYPE>

<html>

<head>

    <meta http-equiv="content-type" content="text/html" charset="utf-8">

    <title>Select All</title>

    <style>

        table{

            border:#999 1px solid;

            border-collapse:collapse;

        }

        table th{

            text-align:center;

        }

        table td{

            border:1px solid #999;

            text-align:center;

        }

        .one{

            background:#6cf;

        }

        .two{

            background:#fc6;

        }

    </style>

    <script type="text/javascript" language="javascript">

        function changecolor(){

            var tr=document.getElementsByTagName("tr");

            tr[0].style.background="#0066ff";

            tr[tr.length-1].style.background="#0066ff";

        }

        function changebox(type) {

            var tbs = document.getElementById("tbs");

            var chks = tbs.getElementsByTagName("input");

            switch (type) {

                case "qx":

                    for (var i = 0; i < chks.length; i++) {

                        chks[i].checked = true;

                    }

                    break;

                case "qxx":

                    for (var i = 0; i < chks.length; i++) {

                        chks[i].checked = false;

                    }

                    break;

                case "fx":

                    for (var i = 0; i < chks.length; i++) {

                        if (chks[i].checked == true) {

                            chks[i].checked = false;

                        } else {

                            chks[i].checked = true;

                        }

                    }

                    break;

            }

        }

        function del(){

            var input=document.getElementsByName("check[]");

            for(var i=input.length-1; i>=0; i--){

                if(input[i].checked==true){

                    var td=input[i].parentNode;

                    var tr=td.parentNode;

                    var table=tr.parentNode;

                    table.removeChild(tr);

                }

            }

        }

    </script>

</head>

<body onload="changecolor()">

<table width="400" border="0" align="center">

    <tr>

        <th>选项</th>

        <th>发件人</th>

        <th>邮件名称</th>

        <th>邮件附属信息</th>

    </tr>

    <tbody id="tbs">

    <tr class="one">

        <td><input type="checkbox" name="check[]"></td>

        <td>王大力</td>

        <td>wdl@qq.com</td>

        <td>个人邮箱</td>

    </tr>

    <tr class="two">

        <td><input type="checkbox" name="check[]"></td>

        <td>王大力</td>

        <td>wdl@qq.com</td>

        <td>个人邮箱</td>

    </tr>

    <tr class="one">

        <td><input type="checkbox" name="check[]"></td>

        <td>王大力</td>

        <td>wdl@qq.com</td>

        <td>个人邮箱</td>

    </tr>

    <tr class="two">

        <td><input type="checkbox" name="check[]"></td>

        <td>王大力</td>

        <td>wdl@qq.com</td>

        <td>个人邮箱</td>

    </tr>

    <tr class="one">

        <td><input type="checkbox" name="check[]"></td>

        <td>王大力</td>

        <td>wdl@qq.com</td>

        <td>个人邮箱</td>

    </tr>

    <tr class="two">

        <td><input type="checkbox" name="check[]"></td>

        <td>王大力</td>

        <td>wdl@qq.com</td>

        <td>个人邮箱</td>

    </tr>

    <tr class="one">

        <td><input type="checkbox" name="check[]"></td>

        <td>王大力</td>

        <td>wdl@qq.com</td>

        <td>个人邮箱</td>

    </tr>

    <tr>

    <th>选项</th>

    <td colspan="3" align="center">

        <input type="button" id="qx" onclick="changebox('qx')" value="全选">

        <input type="button" id="qxx" onclick="changebox('qxx')" value="取消全选">

        <input type="button" id="fx" onclick="changebox('fx')" value="反选">

        <input type="button" id="del" onclick="del()" value="删除选选附件">

    </td>

    </tr>

    </tbody>

</table>

</body>

</html>

php对表格进行批量操作如全选反选删除功能的更多相关文章

  1. Jquery 1.8全选反选删除选中项实现

    JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...

  2. Vue-表单验证-全选-反选-删除-批量删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 比较全的JS checkbox全选、取消全选、删除功能代码

    看下面两种实现方法: JS checkbox 方法一: 复制代码 代码如下: function checkAll() { var code_Values = document.all['code_Va ...

  4. JS控制checkbox全选、取消全选、删除功能的代码贴出来。。

    function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0; ...

  5. JS中表格的全选和删除要注意的问题

    在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...

  6. javascript总结41:表格全选反选,经典案例详解

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  8. JavaScript、全选反选-课堂笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于input全选反选恶心的异常情况

    上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...

随机推荐

  1. qunit 前端脚本测试用例

    首先引用qunit 测试框架文件 <link rel="stylesheet" href="qunit-1.22.0.css"> <scrip ...

  2. cordova插件开发注意事项

    1. 编写插件,先创建好cordova项目之后,在项目里开发调试好在去创建插件目录 如何在cordova项目里创建呢,在android文件夹下面的res/xml/config.xml里去加入插件 例如 ...

  3. 关于mySQL自连接的一些用法

    自连接是连接的一种用法,但并不是连接的一种类型,因为他的本质是把一张表当成两张表来使用. 举例说明: 这是一张职员信息表,如果我要查询这张表中的每个职员的上司,那么必须使用自连接来查询.所以为了能实现 ...

  4. finally回收资源

    Java中的垃圾回收机制,也就是GC不会回收任何物理资源,垃圾回收机制只回收堆内存中对象所占用的内存,所以其他的物理资源需要用finally来回收. 如果try块中的某条语句引起了异常,该异常就会被c ...

  5. MYSQL MHA

    MYSQL MHA 简介: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于 Face ...

  6. 关于Node.js的总结

    Node是个啥? 1.Node 是一个服务器端 JavaScript 解释器,可是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了,总结:水深不深我还不知道,不过确实不浅. ...

  7. HDFS Client 设计实现解析

    前面对 HDFS NameNode 和 DataNode 的架构设计实现要点做了介绍,本文对 HDFS 最后一个主要构成组件 Client 做进一步解析. 流式读取 HDFS Client 为客户端应 ...

  8. 一步步学习javascript基础篇（1）:基本概念

    一.数据类型 数据类型 基本数据类型(五种) Undefined Null Boolean Number String 复杂数据类型(一种) Object Undefined:只有一个值undefin ...

  9. Guava monitor

    Guava的com.google.util.concurrent类库提供了相对于jdk java.util.concurrent包更加方便实用的并发类,Monitor类就是其中一个.Monitor类在 ...

  10. 一次Mysql 死锁事故

    故障描述: 简单描述一下需求:我们写的一个计步器的客户端软件,用户通过手机客户端将用户的运动计步信息传到服务器. 服务器侧记录每个用户每次上传明细,同时每个用户有一个汇总值,参与全省排名. 1.加入明 ...