<!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. sass和compass的配置

    http://note.youdao.com/share/?id=4f57187f9695bcaadf80516187d2de0e&type=note 当执行安装sass出错时,可以试试这个命 ...

  2. [ios] 定位报错Error Domain=kCLErrorDomain Code=0 "The operation couldn’t be completed. (kCLErrorDomain error 0.)"

    Error Domain=kCLErrorDomain Code=0 "The operation couldn’t be completed. (kCLErrorDomain error ...

  3. placehoder不兼容ie9以下和opero12以下

    颜色设置 解决方案一: ::-webkit-input-placeholder { /* WebKit browsers */ color:#999; } :-moz-placeholder { /* ...

  4. LabVIEW 吸星大法 - 看见的好东西都是我的(中篇)

    前言 写了多年的LabVIEW程序,你是否面临这样的问题 总是在做一些重复的工作,感觉很没有意思: 总在不停的写代码,做类似的控件,实现相同的功能,丝毫没有成就感: 总在天加班,没有时间去提高自己; ...

  5. tab22

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 有关JVM配置参数含义

    1.参数的含义-vmargs -Xms128M -Xmx512M -XX:PermSize=64M -XX:MaxPermSize=128M-vmargs 说明后面是VM的参数,所以后面的其实都是JV ...

  7. Django实现注册

    前言 对于web开来说,用户登陆.注册.文件上传等是最基础的功能,针对不同的web框架,相关的文章非常多,但搜索之后发现大多都不具有完整性,对于想学习web开发的新手来说不具有很强的操作性:对于web ...

  8. ABP理论学习之日志记录

    返回总目录 本篇目录 服务端 获取Logger 基类中的Logger 配置 客户端 服务端 ABP使用的是Castle Windsor的日志记录设备.它可以和不同的日志类库一起工作,比如Log4Net ...

  9. 浅谈WEB安全性（前端向）

    相信进来的时候你已经看到alert弹窗,显示的是你cookie信息(为配合博客园要求已删除).单纯地在你的客户端弹出信息只是类似于迫使你在自己的房间脱衣服——没人看得到,自然也不算啥恶意行为.那么如果 ...

  10. [翻译]理解Swift中的Optional

    原文出处:Understanding Optionals in Swift 苹果新的Swift编程语言带来了一些新的技巧,能使软件开发比以往更方便.更安全.然而,一个很有力的特性Optional,在你 ...