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>
效果:
添加两个:
删除选中: