创建一个简单的Web表单,其中包含姓名,电子邮件地址和提交按钮,使用HTML5 Web存储？
创建一个简单的Web表单，其中包含姓名、电子邮件地址和提交按钮，使用HTML5Web存储来存储数据的一个简单Web表单作业题，不懂的别瞎凑热闹。GKD...
创建一个简单的Web表单，其中包含姓名、电子邮件地址和提交按钮，使用HTML5 Web存储来存储数据的一个简单Web表单
作业题，不懂的别瞎凑热闹。GKD 展开
作业题，不懂的别瞎凑热闹。GKD 展开
3个回答
展开全部
<!DOCTYPE html>
<html>
<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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table,
form {
width: 100%;
text-align: center;
}
thead tr {
background: #ddd;
}
tr:nth-child(even) {
background: #eee;
}
th,
td {
width: 50%;
}
</style>
</head>
<body>
<form>
<label for="name">name</label>
<input type="text" name="name" required="required" />
<label for="email">email</label>
<input type="email" name="email" required="required" />
<input type="submit" value="submit">
</form>
<table>
<thead>
<tr>
<th>name</th>
<th>email</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
<script>
let arr = [];
let appendData = ({ name, email }) => {
let tr = document.createElement("tr");
let tdName = document.createElement("td");
let tdEmail = document.createElement("td");
tdName.innerHTML = name;
tdEmail.innerHTML = email;
tr.appendChild(tdName);
tr.appendChild(tdEmail);
document.querySelector("tbody").appendChild(tr);
}
if (localStorage.getItem("form")) {
arr = JSON.parse(localStorage.getItem("form"));
arr.forEach(item => {
appendData(item)
})
}
document.querySelector("form").onsubmit = () => {
let data = {
name: document.querySelector("input[name='name']").value,
email: document.querySelector("input[name='email']").value
}
arr.push(data);
localStorage.setItem("form", JSON.stringify(arr));
appendData(data)
return false
}
</script>
</html>
请采纳
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
