【原創】表格前端新增和批量刪除

見圖：

引用 

<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>