創建一個具有增加刪除功能的表格，且能夠在頁面中進行存儲
頁面html 文件
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/add_and_del.css" rel="stylesheet">
<title>jquery實現添加、移除表格</title>
</head>
<body>
<div class="to_center">
<form id="info" method="post">
姓名：<input type="text" id="user">
班級：<input type="text" id="greed">
年齡：<input type="text" id="age">
<input type="button" id="btn1" value="添加">
</form>
</div>
<br>
<br>
<br>
<table id="tab" border="1">
<tr id="t1">
<td>姓名</td>
<td>班級</td>
<td>年齡</td>
<td>是否刪除</td>
</tr>
</table>
</body>
<script language="javascript" type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script src="js/add_and_del.js"></script>
</html>
js 文件（刪除功能未實現存儲）
$(document).ready(function () {
sessionStorage.getItem("user");
sessionStorage.getItem("greed");
sessionStorage.getItem("age");
if (localStorage.getItem("count") == 0) {
localStorage.setItem("count", "0");
}
//增加按鈕
$("#btn1").click(function () {
var $count = Number(localStorage.getItem("count"));
$count += 1;
$count += "";
localStorage.setItem("count", $count);
fadein_add($count);
});
var count_inf = localStorage.getItem("count");
//頁面加載時執行
if (count_inf > 0) {
for (i = 1; i <= count_inf; i++) {
i = i + "";
var $tr = $("<tr></tr>");
var $inf = localStorage.getItem(i);
i = parseInt(i);
var $inf_arr = $inf.split(",");
var $td;
//將內容循環添加到創建好的td中
for (m = 0; m < 3; m++) {
$td = $("<td></td>");
// alert($inf_arr[m]);
$td.append($inf_arr[m]);
$("#td").fadeIn();
$td.appendTo($tr);
}
// 添加刪除
var $td = $("<td><a href='#' class='del'>delete</a></td>");
//將內容循環添加到創建好的td中
$td.appendTo($tr);
$tr.appendTo("#tab");
}
//將整個tr插入表格
del();
}
});
//增加方法
function fadein_add($count) {
//創建tr節點
var $tr = $("<tr></tr>");
//創建接收數據數組對象
var $tr_arr = [];
//遍歷獲取輸入的內容
$("#info input:text").each(function (index, domEle) {
//循環存入數組對象
$tr_arr.push($(domEle).val());
//添加td節點
var $td = $("<td></td>");
//將內容循環添加到創建好的td中
$td.append($(domEle).val());
//顯示td,添加到創建好的tr中
$("#td").fadeIn();
$td.appendTo($tr);
});
var table_value = $tr_arr.toString();
localStorage.setItem($count, table_value);
// alert($count+"===second");
// alert(sessionStorage.getItem($count));
// del_button($tr);
var $td = $("<td><a href='#' class='del'>delete</a></td>");
//將內容循環添加到創建好的td中
$td.appendTo($tr);
//將整個tr插入表格
$tr.appendTo("#tab");
del();
}
//創建並插入刪除按鈕
function del_button($tr) {
//創建td--刪除按鈕
var $td = $("<td><a href='#' class='del'>delete</a></td>");
//將內容循環添加到創建好的td中
$td.appendTo($tr);
//將整個tr插入表格
$tr.appendTo("#tab");
}
//響應刪除
function del() {
//執行刪除操作
$(".del").click(function () {
//緩慢隱藏刪除項目
$(this).parent().parent().fadeOut("slow");
$(this).parent().parent().remove();
});
}