<!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. java基础1_标识符，数据类型

    JDK的卸载与安装 : 1  卸载 a 从程序中卸载   控制面板 - 程序和功能 - 卸载JDK; b 删除  C:\Windows\System32 下面的  java   javac  java ...

  2. CSS Reset

    html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, ac ...

  3. 【Beta】Daily Scrum Meeting第五次

    1.任务进度 学号 已完成 接下去要做 502 登陆时将返回的个人信息更新到本地数据库 发布任务到服务器 509 给所有api添加注释 添加及修改职工信息并同步到服务器 517 将提交报课移到报课表界 ...

  4. jquery ui 中的插件开发

    1  $.widget() 必须引用 <script src=")" type="text/javascript"></script> ...

  5. jquery插入复杂表格，合并行列

    此方法为个人测试所写,针对各种兼容性问题还未测试,初写的目的是easyui复杂表头有些缺陷,比如某个表头合并两列, 在easyui中这样操作无法绑定两个值 或者说我没找到 再或者 可以做个隐藏 数据列 ...

  6. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

  7. iOS开发系列--IOS程序开发概览

    概览 终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的 ...

  8. .Net组件程序设计之线程、并发管理（一）

    .Net组件程序设计之线程.并发管理(一) 1.线程 线程 线程的创建 线程的阻塞 线程挂起 线程睡眠 加入线程 线程中止 现在几乎所有的应用程序都是多线程的,给用户看来就是一个应用程序界面(应用程序 ...

  9. Maven常用插件

    maven利用各种插件来管理构建项目,本文记录下工作中常用到的插件及使用方法.每个插件都会提供多个目标(goal),用于标示任务.各插件配置在pom.xml里,如下: <build> [. ...

  10. Python格式化输出

    今天写程序又记不清格式化输出细节了……= =索性整理一下. python print格式化输出. 1. 打印字符串 print ("His name is %s"%("A ...