<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<!-- 发布留言并存储到本地
要求1：点击提交按钮，让用户输入的内容分别加入到表格对应的列表中
要求2：点击每一行的删除按钮，能删除当前行
要求3：刷新页面时能保留当前的页面效果（数据状态不会消失）
要求4：代码规范 -->
<div style="margin-bottom: 15px">
<input type="text" id="username" placeholder="请输入姓名" />
<input type="text" id="age" placeholder="请输入性别" />
<input type="text" id="sex" placeholder="请输入年龄" />
<input type="button" value="提交" id="btn" />
</div>
<table border="1" width="540">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 要求1：点击提交按钮，让用户输入的内容分别加入到表格对应的列表中
var list = [];
getList();
$("#btn").on("click", function () {
// 判断输入框是否有只有空格
if (
$("#username").val().trim() !== "" &&
$("#age").val().trim() !== "" &&
$("#sex").val().trim() !== ""
) {
// 向数组中追加最新数据
list.push({
username: $("#username").val(),
age: $("#age").val(),
sex: $("#sex").val(),
});
// 追加完数据，清空输入框
$("#username").val("");
$("#age").val("");
$("#sex").val("");
// 将数组中的数据转为字符串形式并存在本地
localStorage.setItem("lc_list", JSON.stringify(list));
getList();
} else {
alert("请补充");
}
});
// 封装数据展示函数
function getList() {
// 获取存在本地的字符串数据存给 l_list
var l_list = localStorage.getItem("lc_list");
// 将字符串转为数组形式,也可以和上面合并一步完成
list = JSON.parse(l_list);
// 每次展示数据时,先清空原有的数据
$("tbody").empty();
// 将数组中数据渲染到页面展示
for (var i = 0; i < list.length; i++) {
var tr = $(
"<tr><td>" +
list[i].username +
"</td><td>" +
list[i].age +
"</td><td>" +
list[i].sex +
'</td><td class="dlt">' +
"删除" +
"</td></tr>"
);
$("tbody").append(tr);
}
}
// 点击删除按钮,对应内容删除
$(".dlt").on("click", function () {
// 获取点击按键所对应的序号
var n = $(this).parent().index();
// 删除对应的数据
list.splice(n, 1);
// 重新获取数组存储本地
localStorage.setItem("lc_list", JSON.stringify(list));
// 将本地数据显示
getList();
});
</script>
</body>
</html>
你说的不起作用是指怎样？
不是很理解；
常规来说， 你给button 设置了监听事件，那么就会响应。
怎么会无效呢？