对表格进行批量操作如全选反选删除功能

最新推荐文章于 2021-06-04 16:06:54 发布
最新推荐文章于 2021-06-04 16:06:54 发布
阅读量973 收藏
点赞数
分类专栏： HTML 文章标签： 全选 反选 
<!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>

这里写图片描述

那年夏天KEEP
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+ElemnetUI 表格实现全选、反选、清空
top_yisi的博客
04-29 1036
当你在写vue2+elementui上的表格全选、反选操作遇到问题时，看看这个，也许对你有帮助。
table表格的全反选，删除，增加表格，列的显示与隐藏，数据的获取
08-23
自己用jQuery写的一个table的jQuery操作的demo，里面几乎涵盖了大部分的jquery语法，对想学习jquery的同学来说是很有帮助的
表格1：《添加商品 + 全选 + 反选 + 批量删除 + 总计》
xiaoniba987的博客
03-31 317
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;必须过&lt;/title&gt;        &lt;script src="js/angular.min.js" type="text/ja
vue 实现全选，反选功能
晏紫苏_cc的博客
06-28 1188
一般需要用到全选和反选的示例比如：购物车，批量添加，批量删除等  //需要用到的变量 itemList: [], // 商品列表 totalPrice: 0, //商品总价格 isCheckAll: false, //全选的checkbox是否选中 isChecked: false, //某个checkbox是否选中 checkedIdList: [], //选中的商品的id组合 ...
Recyclerview 实现多选,单选,全选,反选,批量删除的功能的实现
11-09
Recyclerview 实现多选,单选,全选,反选,批量删除的功能的实现 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件  2.这里选中的控件没有用checkbox来做,用的是imageview,选中和不选中其实是两张图片  3.默认是不显示选中的控件的,点击编辑的时候显示,点击取消的时候隐藏  4.通过adapter和activity数据之间的传递,然后进行具体的操作 --------------------- 作者：徐朵朵的小太阳 来源：CSDN 原文：https://blog.csdn.net/GodnessIsMyMine/article/details/83895073 版权声明：本文为博主原创文章，转载请附上博文链接！
全选、反选、批量删除
w98326angle的博客
11-13 525
form{     margin-bottom: 30px;    }    table{     width: 800px;     margin-top: 10px;    }    div{     margin-left: 570px;    }             //二级联动     $(function() {          var cities
JS简单表格列表全选反选代码.zip
07-05
本示例中的"JS简单表格列表全选反选代码"是一个使用原生JS编写的功能，它允许用户通过点击表头按钮来实现表格数据的全选和反选操作。这个功能在处理大量数据时特别有用，例如在用户需要批量操作表格项时。 1. **...
checkbox全选反选与批量删js+asp源码
11-11
在IT行业中，前端开发经常会遇到用户交互操作，如“全选”、“反选”和“批量删除”等需求。这些功能通常应用于数据列表或者表格，让用户可以方便地处理大量数据。本示例“checkbox全选反选与批量删js+asp源码”提供...
Javascript实现全选反选
08-11
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
html table 批量 修改,HTML TABLE批量添加行与删除行
weixin_39907658的博客
06-04 324
表格格式如下:日期开始时间结束时间议题地点内容操作name="date" class="Wdate"onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"value=""readonly="readonly" />type="text" name="startTime" class="Wdate"value=""onfocus="WdatePicker({...
纯Jquery表格全选+反选+增删查找
11-13
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
JavaScript的表格全选以及反选删除的实现和应用
weixin_49640815的博客
12-13 173
body部分 css部分 js部分
动态创建表格;验证数据,全选和反选,批量删除
不知道的博客
08-28 336
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style type="text/css"&gt;             td
全选与批量删除
lz0410的博客
05-23 1256
以下数据仅供参考~~! class="dataTables_wrapper form-inline dt-bootstrap no-footer"> style="overflow: auto; width: 100%;"> class="table table-bordered table-striped table-ho
html table中嵌入checkbox实现全选
热门推荐
Just Code
09-27 1万+
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% Connection ct = null; PreparedStatement ps = null; ResultSet rs = null; String DRIVER = "com.mys
表格全选
qq_44336097的博客
11-24 180
<!--表格全选--> <!DOCTYPE html> <html> <head> <title>表格全选</title> <style type="text/css"> table{ border: 1px solid; width: 500px; margin-left: 30%; } td,th{ text-align: center; border:1px solid
表格批量修改数据
weixin_34060741的博客
02-03 184
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript,js,table,表格全选,行全选,列全选,变色,
黑色头发
08-13 314
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Conte
[Java] JTable 表头加checkbox全选
Jarvis Blog
12-22 7569
效果图： class TableModelProxy extends AbstractTableModel import javax.swing.table.AbstractTableModel;public class TableModelProxy extends AbstractTableModel { /** * */ private static fin
vue3实现全选反选功能
最新发布
05-16
在 Vue 3 中实现全选反选功能，可以使用 `v-model` 指令绑定一个布尔值来实现全选和反选的状态切换。具体实现步骤如下： 1. 在 data 中定义一个数组 `items`，用来存储需要全选反选的选项列表。 ```javascript <script> export default { data() { return { items: [ { id: 1, name: '选项1', checked: false }, { id: 2, name: '选项2', checked: false }, { id: 3, name: '选项3', checked: false } ], allChecked: false // 全选状态，默认为未选中 } } } </script> ``` 2. 在模板中使用 `v-for` 循环渲染出所有选项，并使用 `v-model` 绑定每个选项的 `checked` 属性。 ```html <template> <div> <label> <input type="checkbox" v-model="allChecked" @change="selectAll"> 全选 </label> <div v-for="item in items" :key="item.id"> <label> <input type="checkbox" v-model="item.checked" @change="checkItem"> {{ item.name }} </label> </div> </div> </template> ``` 3. 实现全选和反选的方法。 ```javascript <script> export default { data() { return { items: [ { id: 1, name: '选项1', checked: false }, { id: 2, name: '选项2', checked: false }, { id: 3, name: '选项3', checked: false } ], allChecked: false // 全选状态，默认为未选中 } }, methods: { // 全选/取消全选 selectAll() { this.items.forEach(item => item.checked = this.allChecked) }, // 单个选项被选中/取消选中 checkItem() { this.allChecked = this.items.every(item => item.checked) } } } </script> ``` 在 `selectAll` 方法中，遍历 `items` 数组，将每个选项的 `checked` 属性设置为 `allChecked` 的值，这样就实现了全选和取消全选的功能。 在 `checkItem` 方法中，判断当前是否所有的选项都被选中，如果是，则将 `allChecked` 的值设置为 `true`，否则设置为 `false`，这样就实现了反选的功能。 这样，我们就完成了 Vue 3 中全选反选的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值