有時候工作需要就簡單記錄，其實還是比較簡單的，只是簡單的JQuery的函數應用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AddorDeleteTable</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="context" id="context">
<button type="button" onclick="addTable()">ADD</button>
<table id="baseTable" border="1" cellpadding="2" cellspacing="0" >
<tr>
<th>Number</th>
<th>Content</th>
<th>Operation</th>
</tr>
<table>
</body>
<script>
function addTable(){
var baseTable=$("#baseTable");
//獲取序號
var no=baseTable.find("tr:last td:first").html();
if(no==null){
no=0;
}
no=Number(no)+Number(1);
//獲取輸入內容
var context=$("#context").val();
//增加一行
var tr="<tr>"
+"<td>"+no+"</td>"
+"<td>"+context+"</td>"
+"<td><button type='button' onclick='delTable(this)'>DEL</button></td>"
+"</tr>";
baseTable.append(tr);
//清空輸入框
$("#context").val("");
}
function delTable(obj){
//alert(obj);
$(obj).parent().parent().remove();
}
</script>
</html>效果
