table表格:全选/全部选/批量删除

最新推荐文章于 2021-07-06 09:59:47 发布
最新推荐文章于 2021-07-06 09:59:47 发布
阅读量5.5k 收藏 5
点赞数 1 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            #table {
                width: 630px;
            }
        </style>
    </head>

    <body>

        <div class="top">
            用户:<input type="text" id="username" /> 密码:
            <input type="text" id="passsword" /> 邮箱:
            <input type="text" id="email" />
            <input type="button" id="add" value="添加" />
            <input type="button" id="deleAll" value="批量删除" />
        </div>
        <table border="1px" cellspacing="0px" cellpadding="0px" id="table">
            <tr>
                <td><input type="checkbox" id="top_cb" /></td>
                <td>有户名</td>
                <td>密码</td>
                <td>邮箱</td>
                <td>操作</td>
            </tr>
        </table>

        <script type="text/javascript">
            $("#add").click(function() {
                //验证
                var username = $("#username").val();
                if(username == "") {
                    alert("用户名不能为空")
                    return;
                }

                var passsword = $("#passsword").val();
                if(passsword.length > 6) {
                    alert("密码长度不能大于6")
                    return;
                }

                var email = $("#email").val();
                if(email.indexOf("@") == -1) {
                    alert("邮箱格式不正确")
                    return;
                }
                //添加到表格
                var tr = "<tr><td><input type='checkbox' name='cb'/></td><td>" + username + "</td><td>" + passsword + "</td><td>" + email + "</td><td><input type = 'button' value = '删除'  onclick='dele(this)'/></td></tr>";
                $("#table").append(tr);
            })

            function dele(t) {

                t.parentNode.parentNode.remove();

            }

            $("#deleAll").click(function() {
                var cbs = $("input[type=checkbox]:checked");
                if(cbs.length == 0) {
                    alert("請至少選擇一個")
                    return
                }
                for(var i = 0; i < cbs.length; i++) {
                    var cb = cbs[i];
                    cb.parentNode.parentNode.remove();
                }

                if(cbs.length == 1) {
                    $("#table").empty();
                }

            })
            //全選/全不选
            var flag = true;
            $("#top_cb").click(function() {
                var cb = $("input[type=checkbox]");
                for(var i = 0; i < cb.length; i++) {
                    cb[i].checked = flag;
                }
                flag = !flag;
            })
        </script>

    </body>

</html>
Future_Master_L
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS实现table表格checkbox复选框的全选取消全选
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
11-16 3444
原生JS实现table表格checkbox复选框的全选与取消全选。先来看一下效果： 实现思路： 全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可； 下面复选框需要全部选中，上面全选才能选中做法：给下面所以复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，上面全选就不选中； 可以设置一个变量，来控制全选是否选中。 HTML代码： <table> <thead> <tr>
a-table 批量删除功能：
最新发布
weixin_62131865的博客
06-08 457
用onSelectChange方法把选中的ID存到selectedRowKeys中，再发送remove请求。rowKey使用唯一标识id，如果是有层级关系的表格使用index会有bug产生，故有id就绑定id。
jQuery之事件和批量操作、事件委托示例
weixin_30477797的博客
10-19 164
一、常用事件 click(function(){...}) // 点击时触发 focus(function(){...}) // 获得焦点触发 blur(function(){...}) // 失去焦点触发 change(function(){...}) // 内容改变后触发 keyup(function(){...}) // 键盘按下后触发 keydown(...
table的多选框自动全选
想去旅行的静静的博客
04-16 512
这样写：使用toggleRowSelection方法 data() { return { tableData: [] } }, methods: { getStaffById(row.id).then(res => { const that = this this.tableData = res.data.obj ...
table表格中如何全选---以及复选框实现反选
qq_34802511的博客
09-23 6630
table表格中如何全选，代码如下： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;met
jQuery实现table表格checkbox全选的方法分析
10-18
本篇文章将深入探讨如何使用jQuery实现table表格中checkbox的全选功能，这是一个常见的需求，尤其在需要用户批量操作数据时。 首先，我们需要创建一个基本的HTML表格结构。在表格的表头部分，我们添加一个全选的...
利用Bootstrap实现表格复选框checkbox全选
08-31
在本文中，我们将探讨如何利用Bootstrap这一流行的前端框架来实现表格中的复选框全选功能。Bootstrap是由Twitter开发的，它提供了一套响应式布局、移动设备优先的WEB开发工具，使得网页设计更加简单和快捷。 要实现...
表格中全选按钮的使用以及删除功能的实现
04-23
批量操作则可以在用户选择多个条目后提供统一的操作选项，如批量删除、修改等。 综上所述，实现“表格中全选按钮的使用以及删除功能”涉及前端HTML、CSS、JavaScript与后端Java Web的结合，包括DOM操作、事件监听、...
Bootstrap Table中的多选框删除功能
10-18
在实际的Web应用开发中，常常需要实现多选和批量删除的功能，而Bootstrap Table提供了这样的支持。本篇文章将详细讲解如何在Bootstrap Table中实现多选框删除功能。 首先，我们需要在HTML中创建一个Bootstrap Table...
jQuery+Datatables实现表格批量删除功能【推荐】
12-29
最近遇到这样的需求要求把表格批量删除。下面通过实例代码给大家介绍下。 1：点击全选的选择框CheckBox，选中以下列表中所有的选择框 2：再次点击全选的选择框CheckBox，不选中以下列表中所有的选择框 3：单选某个...
jQuery 实现批量提交表格多行数据的方法
10-18
今天小编就为大家分享一篇jQuery 实现批量提交表格多行数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jQuery+CSS3实现类似表单相册无刷新批量删除特效
11-11
jQuery+CSS3实现类似表单相册无刷新批量删除特效
jQuery添加删除,全选反选,批量删除
xiaozi_11的博客
12-10 311
练习                                                                                                    用户名                                                                            密码   
纯前端多选表格table批量删除
weixin_44769310的博客
03-05 1829
在工作中对表格的数据进行删除，一般来说都是与后端进行联调。但是也会遇到这种情况，对表格删除操作的时候不需要与后台对接，在对表格数据进行删除后点击保存的时候才与后台对接。 今天写这个功能的时候首先想的是两个for循环，这样写起来会代码会比较多且很复杂。抱着对简短优美代码的追求。 handleDeleteSelection() { this.multipleSelection.forEac...
验证邮箱
qq_40056429的博客
12-10 209
#table { width: 630px; } 用户: 密码: 邮箱: 有户名 密码 邮箱 操作 $("#add").click(function() { //验证 var username = $("#username").val(); if (username == "") { ale
vue+element-ui里面table组件多选框实现批量操作
world5的博客
12-24 5271
vue+element-ui里面table组件多选框实现批量操作 有时候人不是被困难难倒的，是被自己蠢哭的。。。官方文档用到某个地方的时候，才感觉对这个方面的理解才会加深一点，还是要记录一下这个地方！ 具体要实现的细节 点击表头的复选项，会进行全选；再次点击，会取消； 每次需要把选中该行的id传过去 切换分页的时候，需要有记忆功能：也就是翻页原本选中的不应该消失 下方图片展示：（展示的是所有的选中的，切换分页的） 第一步添加对应的复选框 具体参照elementui官网是咧 具体参照element官网示例 &
Ant-vue中a-table新增、修改、删除
前端-尔嵘
07-06 2488
如何实现Ant-vue中表格的新增、修改、删除？ 实现源码： <template> <a-card style="margin-top: 24px;"> <a-row> <a-col :xl="24" :md="24" :sm="24"> <a-form-model layout="inline"> <a-form-model-item> ...
vue Table 表格绑定批量删除功能
瑰的博客
06-04 966
1. <el-tooltip class="item" effect="dark" v-if="selectionList" content="将选中当前分页的所有数据，请确认后操作" placement="top-start"> <el-button class="mr10" type="checkbox" :indeterminate="isIndeterminate" v-model="checkAll" @.
表格选中行批量删除
nefu1234的博客
12-06 325
直接贴代码 toDeleteRow() { this.refs.tableData.selection.sort(function(a,b)//按照index升序排序returna.index−b.index)//console.log(this.refs.tableData.selection.sort(function (a,b) { // 按照index升序排序 ...
layui表格监听全选_layui学习笔记——监听表格复选框选择
05-26
在 layui 表格中，可以通过监听复选框的选择来实现批量操作等功能。具体实现步骤如下： 1. 在表格中添加复选框列，并设置lay-skin属性为primary，表示使用layui风格的复选框。 ``` <table class="layui-table" lay-data="{...}"> <colgroup> ... <col width="50"> </colgroup> <thead> ... <th lay-data="{field:'checkbox', width:50, templet:'#checkboxTpl'}"></th> </thead> <tbody> ... </tbody> </table> <script type="text/html" id="checkboxTpl"> <input type="checkbox" lay-skin="primary"> </script> ``` 2. 在JavaScript代码中监听复选框的选择事件，可以使用layui的form模块来实现。需要注意的是，由于表格是动态生成的，所以需要使用layui的form.render()方法重新渲染表单元素。 ``` layui.use(['table', 'form'], function(){ var table = layui.table, form = layui.form; // 监听复选框选择 table.on('checkbox(test)', function(obj){ console.log(obj.checked); // 当前是否选中状态 console.log(obj.data); // 原始数据 console.log(obj.type); // 类型，如果行选则为：row，如果全选则为：all，如果取消选择则为：uncheck console.log(table.checkStatus('test').data); // 获取选中行的数据 }); // 重新渲染表单元素 form.render(); }); ``` 3. 表格中如果存在分页，则需要在分页时重新渲染表单元素。 ``` table.on('page(test)', function(){ form.render(); }); ``` 以上就是监听表格复选框选择的实现方法。需要注意的是，表格中的复选框列必须有唯一的字段名，否则无法在JavaScript代码中获取选中行的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值