<!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. Tomcat7 配置 ssl

    运行一个配置了ssl的项目时tomcat总是启动不成功,报错:“requires the APR/native library which is not available”,后来发现是找不到apr的 ...

  2. PHP的数组排序函数

    <?php class order{ /** * * 数组排序 * @param array $arr 例如: * array ( array ( 'deskId' => '460646' ...

  3. hdu 2037简单贪心--活动安排问题

    活动安排问题就是要在所给的活动集合中选出最大的相容活动子集合,是可以用贪心算法有效求解的很好例子.该问题要求高效地安排一系列争用某一公共资源的活动.贪心算法提供了一个简单.漂亮的方法使得尽可能多的活动 ...

  4. python使用总结

    近来公司的测试部门要我们开发,按他们给我测试案例,写vba脚本,方便他们做自动化测试,老大把这事交给了我做.之前没写过vba,很多API都不会用,边写边谷歌,写得很慢. 我记得测试第一次做的是打开关闭 ...

  5. Finger Trees: A Simple General-purpose Data Structure

    http://staff.city.ac.uk/~ross/papers/FingerTree.html Summary We present 2-3 finger trees, a function ...

  6. perl 删除过期文件

    #!/usr/bin/perl `find /bak/ >list.txt`; open LIST,"/root/list.txt"; while (<LIST> ...

  7. MySQL 忘记root密码解决办法

    标签:root密码不为空 概述 很多时候mysql安装完root用户的默认密码不为空,这时候就需要通过其它办法登入到mysql重置密码. 步骤 方法1:查看/root/.mysql_secret文件 ...

  8. SQL Server 深入解析索引存储(上)

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/索引体系结构/堆/聚集索引 概述 最近要分享一个课件就重新把这块知识整理了一遍出来,篇幅有点长,想要理解的透彻还是要上机实践. 聚 ...

  9. npm不是以管理身份运行遇到的问题

    环境:win10+npm3.10.5 问题:在npm install lodash时,出现下列错误("npm-debug.log"文件内容) 0 info it worked if ...

  10. MVC与WebForm的区别

    在初步了解MVC后,发现很多人对于MVC和三层架构开发概念上会有很大的混淆,所以把这两天的学习笔记整理一下,分享给自己的同学们.同时也做一个小Demo,让没有接触过MVC开发的同学,能对MVC有一个简 ...