js动态添加表格，批量删除表格

最新推荐文章于 2024-08-16 05:34:54 发布
最新推荐文章于 2024-08-16 05:34:54 发布
阅读量703 收藏 6
点赞数
分类专栏： 前端layui 文章标签： html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40087726/article/details/106909757
版权

标准的动态添加，删除，全选，反选

<%--  添加图书  --%>
<button class="addBtn">添加</button>
<button class="mulBtn">删除</button>
<%--<form>--%>
    <table id="tab" border="1px" cellspacing="0" ailgn="center" width="80%">
        <thead>
            <td>全选：<input type="checkbox" name="index" id="allid"/>反选:<input type="checkbox" name="index" id="fanid"/></td>
            <td>类别编号</td>
            <td>标题</td>
            <td>简介</td>
            <td>作者</td>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="index" /></td>
                <td><input type="text" name="cid" /></td>
                <td><input type="text" name="title" /></td>
                <td><input type="text" name="summary" /></td>
                <td><input type="text" name="uploadUser" /></td>
            </tr>
        </tbody>
    </table>
    <button class="addEdoc">提交</button>
<%--</form>--%>
</body>
</html>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
    $(function () {

        var i=0;
        // 实现全选
        $("#allid").click(function () {

            if(i==0){
                //把所有复选框选中
                $("#tab td :checkbox").not("#fanid").prop("checked", true);
                i=1;
            }else{
                $("#tab td :checkbox").not("#fanid").prop("checked", false);
                i=0;
            }
        })
        // 实现反转
        $("#fanid").click(function () {

            $("#tab td :checkbox").not("#allid").each(function(){
                //遍历所有复选框，然后取值进行 !非操作
                $(this).prop("checked", !$(this).prop("checked"));
            })
        })

        // 添加按钮
        $(".addBtn").click(function () {
            var str = "<tr>\n" +
                "                <td><input type=\"checkbox\" name=\"index\"/></td>"+
                "                <td><input type=\"text\" name=\"cid\" /></td>\n" +
                "                <td><input type=\"text\" name=\"title\" /></td>\n" +
                "                <td><input type=\"text\" name=\"summary\" /></td>\n" +
                "                <td><input type=\"text\" name=\"uploadUser\" /></td>\n" +
                "</tr> ";
            $("tbody").append(str);
        })
        //删除按钮
        $(".mulBtn").click(function () {

            $("input[type=checkbox]").each(function () {
                if($(this).is(":checked")){

                    // 自己是不能删除节点 必须通过父节点删除
                    $(this).parent().parent().remove();
                }
            })
        })

        // 批量添加操作
        $(".addEdoc").click(function () {

            var cids = new Array();
            var titles = new Array();
            var summarys = new Array();
            var uploadUsers = new Array();

            var i=0;
            $("input[name=cid]").each(function () {
                cids[i] = $(this).val();
                i++;
            })
            i=0;
            $("input[name=title]").each(function () {
                titles[i] = $(this).val();
                i++;
            })
            i=0;
            $("input[name=summary]").each(function () {
                summarys[i] = $(this).val();
                i++;
            })
            i=0;
            $("input[name=uploadUser]").each(function () {
                uploadUsers[i] = $(this).val();
                i++;
            })
            console.log(cids.length)
            $.ajax({
                type:"get",
                data:{
                    "cids":JSON.stringify(cids)
                    ,"titles":JSON.stringify(titles)
                    ,"summarys":JSON.stringify(summarys)
                    ,"uploadUsers":JSON.stringify(uploadUsers)
                },
                url:"http://localhost:8080/add",
                success:function (data) {
                    alert("123")
                }
            })
        })
    })
</script>

可以插入多行，批量删除

<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="../../plugin/layui/layui.js"></script>

    <link rel="stylesheet" href="../../plugin/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../css/cma.css" />
</head>

<body>

<div>
    <div style="margin-top:10px;margin-left:5px;float:left" >
        <button class="layui-btn  layui-btn-normal " id="saveProduct" type="button">保存</button>
    </div>
    <div style="margin-top:10px ;margin-left:5px;float:left">
        <button class="layui-btn  layui-btn-normal " id="addProduct" type="button">新增</button>
    </div>
    <div style="margin-top:10px;margin-left:5px;float:left">
        <button class="layui-btn  layui-btn-normal"  id="deleteProduct" type="button">删除</button>
    </div>
</div>

<hr>
<div class="addProduct" align="center">
    <div class="addProIn">
        <form class="layui-form">
            <!-- border="1" cellpadding="2" cellspacing="0" -->
            <table id="product"  >
                <tr height="50px" style="text-align:center">
                    <td width="5%"></td>
                    <td width="10%">产品名称</td>
                    <td width="10%">产品品牌 （商标）</td>
                    <td width="10%">产品类别</td>
                    <td width="10%">标准净含量</td>
                    <td width="10%">产品标准</td>
                    <td width="10%">生产地点</td>
                    <td width="10%">时间类型</td>
                    <td width="10%">时间</td>
                    <td width="10%">备注</td>
                </tr>
                <tr>

                    <td height="80%" style="text-align:center">
                        <input name="delete"  type="checkbox" lay-skin="primary"  value="01">
                    </td>
                    <td height="80%" style="padding:5px 5px">
                        <input name="title" class="layui-input title1" type="text" id="testtt"
                               width="100px" heigh="80px" name="title1" autocomplete="off"
                               lay-verify="title"></td>
                    <td style="padding:5px 5px"><input name="title2" class="layui-input title2" type="text"
                                                       width="50px"  autocomplete="off"
                                                       lay-verify="title"></td>
                    <td style="padding:5px 5px"><input name="title3" class="layui-input title3" type="text"
                                                       width="50px"  autocomplete="off"
                                                       lay-verify="title"></td>
                    <td style="padding:5px 5px"><input name="title4" class="layui-input title4" type="text"
                                                       width="50px"  autocomplete="off"
                                                       lay-verify="title"></td>
                    <td style="padding:5px 5px"><input name="title5" class="layui-input title5" type="text"
                                                       width="50px" autocomplete="off"
                                                       lay-verify="title"></td>
                    <td style="padding:5px 5px"><input name="title6" class="layui-input title6" type="text"
                                                       width="50px"  autocomplete="off"
                                                       lay-verify="title"></td>
                    <td style="padding:5px 5px">
                        <select name="modules" lay-search="" lay-verify="required"><option value="1">开始时间</option><option value="2">结束时间</option></select>
                    </td>
                    <td style="padding:5px 5px">
                        <input name="date" class="layui-input datetime" id="date" type="text"  autocomplete="off" lay-verify="date">
                    </td>
                    <td style="padding:5px 5px"><input name="title" class="layui-input" type="text"
                                                       width="50px"  autocomplete="off"
                                                       lay-verify="title"></td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
<script>

    //增加
    window.document.getElementById('addProduct').onclick = function (){

        var tableobj =document.getElementById("product").lastChild;
        var trobj =document.createElement("tr");
        var tdobj=document.createElement("td");

        tdobj.innerHTML='<input name="delete"  type="checkbox" lay-skin="primary"  value="">';
        tdobj.style.textAlign="center";
        trobj.appendChild(tdobj);
        var j = 0;
        var inputName = new Array("name1","name2","name3","name4","name5","name6","name7","name8","name9")
        for(var i=0;i<9;i++)
        {
            if( i == 7){
                var tdobj=document.createElement("td");
                tdobj.style.padding="5px 5px";
                tdobj.innerHTML='<input name="'+inputName[i]+'" class="layui-input datetime"  type="text" autocomplete="off" lay-verify="date">';
                trobj.appendChild(tdobj);
            }else if( i == 6 ){
                var tdobj=document.createElement("td");
                tdobj.style.padding="5px 5px";
                tdobj.innerHTML='<select name="'+inputName[i]+'" lay-search="" lay-verify="required"><option value="1">开始时间</option><option value="2">结束时间</option></select>';
                trobj.appendChild(tdobj);
            }else{
                var tdobj=document.createElement("td");
                tdobj.style.padding="5px 5px";
                j=i+1;
                tdobj.innerHTML='<input name="'+inputName[i]+'" class="layui-input title'+j+'" type="text" width="50px"  autocomplete="off" lay-verify="title">';
                trobj.appendChild(tdobj);
            }

        }
        trobj.appendChild(tdobj);
        tableobj.appendChild(trobj);

        layui.use(['element','layer','laydate','form'], function(){
            var laydate = layui.laydate,layer = layui.layer,element = layui.element,form=layui.form;

            lay('.datetime').each(function(){
                laydate.render({
                    elem: this
                    ,trigger: 'click'
                });
            });
            form.render("checkbox");
            form.render("select");
        });


    }

    layui.use(['element','layer','laydate','form'],function(){
        var element = layui.element
            ,layer = layui.layer
            ,$ = layui.jquery
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        //删除tr
        $("#deleteProduct").click(function(){
            $("input[name='delete']:checked").each(function() {
                n = $(this).parents("tr").index();
                $("table#product").find("tr:eq("+n+")").remove();
            });
        });

    })
</script>
</html>
max_yuyu
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 批量删除功能
wuzengman的博客
11-16 1万+
其实批量删除就是cehckbox 属性，首先解释 点击全选 CheckAll(this);  function CheckAll(event){     var checked = event.checked; //把选中这个属性赋值给一个变量     $('#ptagTbody input[type:"checkbox"]').prop('checked', checked);  //把p...
js实现批量删除
Sir_He的博客
08-03 4083
&lt;c:forEach items="${itemsList }" var="item"&gt;                 &lt;tr&gt;                     &lt;td&gt;&lt;input type="checkbox" name="items_id" value="${item.id}" /&g
js表格table的增删改
09-01
js 对表格的动态操作，动态添加，删除，修改
使用js对表格进行添加数据、刪除数据 批量删除数据
简单的男孩
01-21 2781
一 选中多个数据进行删除&&添加数据 html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单选多选</title> <!--做一些修饰,自行定义--> <style> tr { text-align: center; } tr td:first-child {
layui实现单个删除和批量删除
一个爱搞技术的C.的博客
12-05 6778
文章目录layui实现单个删除和批量删除先获得表格数据一、单个删除1、在js文件中绑定操作工具栏的删除操作2、domain层：3、controller层：4、service层：5、dao层：二、批量删除1、首先在页面上定义批量删除按钮2、在js文件中绑定按钮点击事件3、controller层：4、service层：5、dao层： layui实现单个删除和批量删除 先获得表格数据 ​ //用户列表 ...
JS动态生成表格-添加删除操作
weixin_46670235的博客
03-17 180
判断数组元素长度 添加tr 判断数组属性长度 添加td 最后创建td 添加删除链接 注册点击事件 删除该链接的父亲的父亲 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co.
JavaScript——动态增删表格
weixin_43305674的博客
10-03 217
主要使用document.getElemetById()、obj.appendChild()、obj.setAttribute()、document.createTextNode()、table.removeChild()等方法，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> &l
JavaScript中动态向表格添加数据
10-20
3. **动态添加元素**： 使用`document.createElement()`方法可以创建新的HTML元素。例如，创建新的`<tr>`、`<td>`或`<input>`元素。`innerHTML`属性用于设置或获取元素内部的HTML内容。 4. **遍历数组和操作DOM**...
js word表格动态添加代码
10-29
- 使用JavaScript进行Word宏编程可以创建复杂的自动化任务，比如在文档中动态添加表格，并对表格进行格式化和填充数据。 ### JavaScript与Word的交互方式 - 在早期的Office版本中，可以通过ActiveX控件与Word交互，...
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
10-15
在Vue.js中，使用Element UI库操作...以上就是关于在Vue.js项目中使用Element UI表格组件进行添加行、修改、单独删除行以及批量删除行操作的详细实现方法。通过这些方法，可以为Vue.js项目构建功能完善的数据管理界面。
js 添加删除表格
03-06
在JavaScript中，添加和删除表格是常见的操作，特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能，并提供一个简单的源码示例。首先，我们需要理解HTML表格的基本结构，然后利用...
LayUI表格批量删除方法
10-18
在LayUI的表格组件中，批量删除的操作可以通过结合复选框（checkbox）和JavaScript脚本来实现。复选框通常放置在表格的每一行，用户可以通过勾选复选框来选择需要批量删除的行。实现批量删除功能的关键步骤可以分为...
js实现全选，全不选，反选，批量删除等（Yii）
JoeyBlog
12-10 1424
这里的大型网站架构只包括高互动性高交互性的数据型大型网站，基于大家众所周知的原因，我们就不谈新闻类和一些依靠HTML静态化就可以实现的架构了，我们以高负载高数据交换高数据流动性的网站为例 比如海内，开心网等类似的web2.0系列架构。我们这里不讨论是PHP还是JSP或者.NET环境，我们从架构的方面去看问题，实现语言方面并不是问题，语言的优势在于实现而不是好坏，不论你选择任何语言，架构都是必
js 全选/全不选/反选 php for表单实现批量删除
phpwanmei的博客
07-31 185
<form class="form form-horizontal" action="{:U('huati/sdel')}" method="post"> <table class="table table-border table-bordered table-bg"> <thead> <tr class="...
js批量删除
wdbk_xiaotu的博客
04-27 708
今天给大家介绍一下删除所选中的项的办法代码如下*注意命名是名字不能和类名相同&lt;div class="delete1"&gt; &lt;input type="button" value="删除所选" onclick='delete1'&gt;&lt;/div&gt;  &lt;script type="text/javascript"&gt;     func
原生JS 对表格增加删除，多选删除，全选，取消全选
qq_49420571的博客
10-17 399
原生JS 对表格增加删除，多选删除，全选，取消全选
js 数组去重，数组对象删除多个
菜鸡进阶之路
08-04 1348
数组去重；删除多个数组中的对象
加速网页加载，提升用户体验：HTML、JS 和 Vue 项目优化全攻略
最新发布
服务员的博客
08-16 802
除了以上列出的方法，还有很多其他的优化技巧，例如使用 CDN 加速、HTTP/2 协议、Service Worker 缓存等等。在信息爆炸的时代，网页加载速度成为了用户体验的重中之重。为了留住用户，提升转化率，网页优化势在必行！网页优化是一个持续的过程，需要不断学习和实践。通过以上方法，你可以有效提升网页加载速度，为用户提供更流畅的体验，最终实现更高的转化率和用户满意度。本文将从 HTML、JavaScript 和 Vue 项目三个方面，为你提供一份全面的网页优化指南，助你打造闪电般的加载速度！
表格批量删除jquery
06-01
您可以使用以下代码来批量删除表格中的行： ```javascript // 给删除按钮添加点击事件 $("#delete-btn").click(function() { // 遍历所有选中的行 $("table input[type='checkbox']:checked").each(function() { // 找到当前行并删除 $(this).closest("tr").remove(); }); }); ``` 其中，`#delete-btn` 是删除按钮的 ID，`table input[type='checkbox']:checked` 是选中的复选框的选择器。在点击删除按钮时，遍历所有选中的行，找到当前行并删除。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值