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;width:4%"> <label class=""> <input type="checkbox" class="ace" id="top_cb" /> <span class="lbl"></span> </label> </th> 
             <th class="meeting_minutes_th" style="width:8%">會議決議編號</th> 
             <th class="meeting_minutes_th" style="width:25%">決議事項</th> 
             <th class="meeting_minutes_th" style="width:8%">執行負責人</th> 
             <th class="meeting_minutes_th" style="width:25%">實施目標</th> 
             <th class="meeting_minutes_th" style="width:15%"><i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>完成期限</th> 
             <th class="meeting_minutes_th" style="width: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>\n" +
                                "<td class=\"center\" style=\"height:20%; \"><label class=\"position-relative\">\n" +
                                "<input type=\"checkbox\" class=\"ace\" name=\"cb\"/>\n" +
                                "<span class=\"lbl\"></span>\n" +
                                "</label>\n" +
                                "</td>\n" +
                                "<td style=\"height:40px; \">\n" +
                                "<input class=\"meeting_minutes_td_input\" name=\"\" value=\"\"/>\n" +
                                "</td>\n" +
                                "<td class=\"\" style=\"height:40px; \">\n" +
                                "<input class=\"meeting_minutes_td_input\" name=\"\" value=\"\"/>\n" +
                                "</td>\n" +
                                "<td class=\"\" style=\"height:40px; \"> \n" +
                                "<input class=\"meeting_minutes_td_input\" name=\"\" value=\"\"/> </td>\n" +
                                "<td style=\"height:40px; \"><input class=\"meeting_minutes_td_input\" name=\"\" value=\"\"/></td>\n" +
                                "<td style=\"height:40px; \"><input class=\"meeting_minutes_td_input\" name=\"\" value=\"\"/></td>\n" +
                                "<td style=\"height:40px; \"><input class=\"meeting_minutes_td_input\" name=\"\" value=\"\"/></td>\n" +
                                "</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>

效果：

 

 添加兩個：

刪除選中：