zoukankan      html  css  js  c++  java
  • table中批量删除复选框中选择行、动态添加行

    html部分:

        <p> 
            <button class="btn btn-white btn-info btn-bold" id="add_meeting_minute"> 添加 </button> 
            <button class="btn btn-white btn-pink btn-round" id="delete_meeting_minute"> 删除 </button> 
        </p> 
        <table class=" table-bordered"> 
            <thead> 
                <tr style="background-color:rgba(224, 224, 224,0.4)"> 
                 <th class="center" style="padding:8px;4%"> <label class=""> <input type="checkbox" class="ace" id="top_cb" /> <span class="lbl"></span> </label> </th> 
                 <th class="meeting_minutes_th" style="8%">会议决议编号</th> 
                 <th class="meeting_minutes_th" style="25%">决议事项</th> 
                 <th class="meeting_minutes_th" style="8%">执行负责人</th> 
                 <th class="meeting_minutes_th" style="25%">实施目标</th> 
                 <th class="meeting_minutes_th" style="15%"><i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>完成期限</th> 
                 <th class="meeting_minutes_th" style="8%">检查人</th> 
                </tr> 
            </thead> 
            <tbody id="meeting_minutes"> 
                <tr> 
                 <td class="center" style="height:20%; "> <label class="position-relative"> <input type="checkbox" class="ace" name="cb" /> <span class="lbl"></span> </label> </td> 
                 <td style="height:40px; "> <input class="meeting_minutes_td_input" name="" value="000001" /> </td> 
                 <td class="" style="height:40px; "> <input class="meeting_minutes_td_input" name="" value="编写测试文档" /> </td> 
                 <td class="" style="height:40px; "> <input class="meeting_minutes_td_input" name="" value="张三" /> </td> 
                 <td style="height:40px; "><input class="meeting_minutes_td_input" name="" value="完成高效的测试文档" /></td> 
                 <td style="height:40px; "><input class="meeting_minutes_td_input" name="" value="2020-9-5 12:00" /></td> 
                 <td style="height:40px; "><input class="meeting_minutes_td_input" name="" value="李四" /></td> 
                </tr> 
            </tbody> 
        </table>

    JavaScript部分:(需要导入jquery.min.js)

            <script >
                    $(function(){
                        // 添加选项
                        $("#add_meeting_minute").click(function(){
                                $("#meeting_minutes").append("<tr>
    " +
                                    "<td class="center" style="height:20%; "><label class="position-relative">
    " +
                                    "<input type="checkbox" class="ace" name="cb"/>
    " +
                                    "<span class="lbl"></span>
    " +
                                    "</label>
    " +
                                    "</td>
    " +
                                    "<td style="height:40px; ">
    " +
                                    "<input class="meeting_minutes_td_input" name="" value=""/>
    " +
                                    "</td>
    " +
                                    "<td class="" style="height:40px; ">
    " +
                                    "<input class="meeting_minutes_td_input" name="" value=""/>
    " +
                                    "</td>
    " +
                                    "<td class="" style="height:40px; "> 
    " +
                                    "<input class="meeting_minutes_td_input" name="" value=""/> </td>
    " +
                                    "<td style="height:40px; "><input class="meeting_minutes_td_input" name="" value=""/></td>
    " +
                                    "<td style="height:40px; "><input class="meeting_minutes_td_input" name="" value=""/></td>
    " +
                                    "<td style="height:40px; "><input class="meeting_minutes_td_input" name="" value=""/></td>
    " +
                                    "</tr>");
                        });
                    });
                    
                    // 删除选项
                    $("#delete_meeting_minute").click(function() {
                        var cbs = $("input[type=checkbox]:checked").filter(".ace");//只删除class=ace的,而不能是删除所有选择的复选框。
                        if(cbs.length == 0) {
                            alert("请至少选择一个")                        
                        }
                        for(var i = 0; i < cbs.length; i++) {
                            var cb = cbs[i];                        
                            if(cb.id!='top_cb')//防止删除表头中的复选框                        
                                cb.parentNode.parentNode.parentNode.remove();
                        }
    
                    });
                                    
                     //全选/全不选
                    var flag = true;
                    $("#top_cb").click(function() {
                        var cb = $("input[type=checkbox]").filter(".ace");                    
                        for(var i = 0; i < cb.length; i++) {
                            cb[i].checked = flag;
                        }
                        flag = !flag;
                    })
            </script>

    效果:

     添加两个:

    删除选中:

     

  • 相关阅读:
    Linux用户权限规范 /etc/sudoers文件解释
    Linux命令-用户、用户组、权限
    百度云盘问题专栏
    Chrome插件下载地址
    Linux命令-tar
    python:rs, ws, es = select.select(inputs, [], []) --报错error 10022
    1月份学习计划
    @Override 注解compiler1.5和compiler1.6不同
    tomcat启动(Ⅷ)--请求最终目的地 getContainer().getPipeline().getFirst().invoke(request, response)
    tomcat启动(Ⅶ)请求处理--Processor.process(SocketWrapper<S> socketWrapper)
  • 原文地址:https://www.cnblogs.com/ssyh/p/12295141.html
Copyright © 2011-2022 走看看