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

最新推荐文章于 2024-04-29 17:42:02 发布
最新推荐文章于 2024-04-29 17:42:02 发布
阅读量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
    评论
专栏目录
iview实现表格的全选、反选、清空、统计、单选等功能
wytraining
03-29 4416
iview实现表格的全选、反选、清空、统计、单选等功能
列表的全选反选
Zmq321834649的博客
10-24 536
一个简单的表格，全选反选功能，以及删除
Vue+ElemnetUI 表格实现全选、反选、清空
最新发布
top_yisi的博客
04-29 987
当你在写vue2+elementui上的表格全选、反选操作遇到问题时，看看这个，也许对你有帮助。
Vue 2.0 制作列表组件，实现分页、搜索、批量操作等
热门推荐
大灰狼的小绵羊哥哥的博客
02-09 1万+
本文仅讲解如何使用 Vue 创建一个实现分页、搜索、批量操作的列表组件，所以只提供此小组件的代码及说明，不提供其之外的代码或配置 github 地址： https://github.com/jothy1023/vue-component 使用到的技术或框架 Vue.js (2.0) 一套基于 MVVM 的 progressive framework，可以帮助我们迅速搭建用
JS简单表格列表全选反选代码.zip
07-05
本示例中的"JS简单表格列表全选反选代码"是一个使用原生JS编写的功能，它允许用户通过点击表头按钮来实现表格数据的全选和反选操作。这个功能在处理大量数据时特别有用，例如在用户需要批量操作表格项时。 1. **...
checkbox全选反选与批量删js+asp源码
11-11
在IT行业中，前端开发经常会遇到用户交互操作，如“全选”、“反选”和“批量删除”等需求。这些功能通常应用于数据列表或者表格，让用户可以方便地处理大量数据。本示例“checkbox全选反选与批量删js+asp源码”提供...
Javascript实现全选反选
08-11
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
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
ZTree的全选 反选 全不选 取消 清空
yuanting_的博客
07-04 3624
全选 //全选 $('#c_all').on('click',function (e) { var zTree = $.fn.zTree.getZTreeObj("treeMenu");//得到tree对象 treeMenu是我的treeid var node = zTree.getNodes();//...
checkbox表格全选
CherishL_的专栏
04-14 879
function checkAll(obj){ if(obj.checked){ $("table input[type=checkbox]").prop("checked",true); }else{ $("table input[type=checkbox]").removeAttr("checked");
vue 工作项目中 实现消息列表的 全选，反选，删除功能
qq_35397218的博客
10-13 1383
template HTML 结构 radio 我是用的vux 中的checker 组件；(这个可以改成原生radio ；也可以绑定v-model) &lt;div class="list" v-for="(item,index) in messageList"&gt; &lt;div class="top flex-row"&gt; &lt;div cla...
vue 实现全选，反选功能
晏紫苏_cc的博客
06-28 1188
一般需要用到全选和反选的示例比如：购物车，批量添加，批量删除等  //需要用到的变量 itemList: [], // 商品列表 totalPrice: 0, //商品总价格 isCheckAll: false, //全选的checkbox是否选中 isChecked: false, //某个checkbox是否选中 checkedIdList: [], //选中的商品的id组合 ...
使用vue.js实现checkbox的全选，和部分删除，部分提交
weixin_36944932的博客
01-31 4719
直接上代码： template> div class="select"> ul> li v-for="(item,index) in lesson" style="margin-top: 15px;"> label class="checkbox-label"> input v-model="selectArr" :value="i
数据列表的全选、反选以及批量操作
djb8317的博客
11-19 836
数据列表的全选、反选以及批量操作 html部分代码： 1、全选的checkbox： <input type="checkbox" value="" id="all_columnId"> 2、每条数据前边的checkbox:<input type="checkbox" name="columnId" class="chrId" value="<% $Item.Id ...
全选、反选、批量删除
w98326angle的博客
11-13 523
form{     margin-bottom: 30px;    }    table{     width: 800px;     margin-top: 10px;    }    div{     margin-left: 570px;    }             //二级联动     $(function() {          var cities
动态创建表格;验证数据,全选和反选,批量删除
不知道的博客
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
表格批量修改数据
weixin_34060741的博客
02-03 184
2019独角兽企业重金招聘Python工程师标准>>> ...
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、付费专栏及课程。

余额充值