<!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. 【SQL语句】update ... ... from ......

    要求:修改vaj表中的vaj02字段的值,vaj02字段的值=cag.cag03的值,vaj 表与 cag 表无直接关联 实现: update vaj set vaj02=c.cag03 from l ...

  2. [LintCode] Container With Most Water 装最多水的容器

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  3. Android事件分发传递

    一.与触摸事件有关的几个方法 boolean dispatchTouchEvent(MotionEvent ev); 接收到触摸事件时,是否分发事件到下面的View 返回true:分发触摸事件 返回f ...

  4. JS中常遇到的浏览器兼容问题和解决方法

    今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...

  5. WebService的开发、部署、调用

    本文参考其它文章和自己解决中间问题的经历记录,以C#开发WebService为例子,欢迎探讨: 一.C#开发WebService 在visual studio中新建ASP.NET Web服务应用程序, ...

  6. stl文件格式解析代码--java版

    代码是参考three.js中的stlLoader.js写的. 需要注意的地方,java中byte取值-128~127 package test_stl.test_entry; import java. ...

  7. ntfs-3g

    CentOS默认源里没有ntfs3g,想要添加ntfs支持,无非是自己下载编译安装或者加源yum安装. 昨天重新安装了一个CentOS7,用的是添加aliyun的epel源来yum安装的方式,简单易行 ...

  8. MySQL操作使用

    这只是一些简单的数据库命令,作为新手记录一下,以供后面查询使用. 查询服务器版本号和当前日期: select version(), current_date; 一个命令通常用一个SQL语句组成,后面跟 ...

  9. 火狐下white-space: nowrap对float的影响

  10. STOMP协议介绍

    STOMP,Streaming Text Orientated Message Protocol,是流文本定向消息协议,是一种为MOM(Message Oriented Middleware,面向消息 ...