见图:
引用
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
JS
$(function(){
//全选与反选
$(".table :checkbox:first").change(function(){
$(this).closest("table")
.find(":checkbox:not(:first)")
.prop("checked", this.checked);
});
//新增
var num = 0;
$("#btn-add").click(function(){
num++
$(
'<tr>'+
'<td><input type="checkbox" name="" id="" value="" /></td>'+
'<td>'+num+'</td>'+
'<td>汽车后服务市场的兴起</td>'+
'<td>2017-09-09</td>'+
'</tr>'
).insertBefore(".tr-row")
})
//字符串拼接注意:
'<select class="form-control chosen" id="chooseGoodId'+num+'" name="chooseGoodId">'+
//删除
$("#btn-del").click(function(){
var all_checked = $(".table tbody td input:checked");
for(var i=0;i< all_checked.length;i++)
{
all_checked.eq(i).parent().parent().remove();
}
})
})
HTML
<div class="container">
<div class="row">
<div class="btn btn-primary" id="btn-add">
新增
</div>
<div class="btn btn-danger" id="btn-del">
批量删除
</div>
</div>
<table class="table">
<thead>
<th><input type="checkbox" name="" id="" value="" /></th>
<th>序</th>
<th>标题</th>
<th>时间</th>
</thead>
<tbody>
<tr class="tr-row">
<td colspan="4"></td>
</tr>
</tbody>
</table>
</div>