第一篇博客

最新推荐文章于 2024-11-19 02:15:34 发布

原创最新推荐文章于 2024-11-19 02:15:34 发布 · 132 阅读

CC 4.0 BY-SA版权

本文介绍了一个简单的HTML页面，该页面使用JavaScript进行表单验证，并将有效数据动态添加到表格中。当用户输入姓名、密码和邮箱时，会检查这些字段是否为空。如果所有字段都填写了，则数据将被添加到表格中，并且每个条目都可以通过点击“删除”按钮来移除。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
width: 300px
}

label span {
color: red;
}
</style>
<script>
function add() {
var stu = {};
var err = [];
var e_uname = document.getElementById("uname").value;
var pass = document.getElementById("pass").value;
var emil = document.getElementById("emil").value;
if(e_uname == undefined || e_uname == "") {
document.getElementById("t_uname").innerText = "用户名不能为空";
err.push(1);
} else {
document.getElementById("t_uname").innerText = "";
stu.uname = e_uname;
}
if(pass == undefined || pass == "") {
document.getElementById("t_pass").innerText = "年龄不能为空";
err.push(2);
} else {
stu.pass = pass;
document.getElementById("t_pass").innerText = "";

}
if(emil == undefined || emil == "") {
document.getElementById("t_emil").innerText = "年龄不能为空";
err.push(3);
} else {
stu.emil = emil;
document.getElementById("t_emil").innerText = "";

}
if(err.length == 0) {
add_totable(stu);
} else {
alert("输入错误!!");
}
}

function add_totable(o) {
var n_tr = document.createElement("tr");
var n_td1 = document.createElement("td");
n_td1.innerText = o.uname;
var n_td2 = document.createElement("td");
n_td2.innerText = o.pass;
var n_td3 = document.createElement("td");
n_td3.innerText = o.emil;
var n_td4 = document.createElement("td");
var but = document.createElement("button");
but.innerText = "删除";
but.onclick = function() {
console.log("this", this);
this.parentElement.parentElement.remove();
}
n_td4.appendChild(but);
n_tr.appendChild(n_td1);
n_tr.appendChild(n_td2);
n_tr.appendChild(n_td3);
n_tr.appendChild(n_td4);
document.getElementById("tb1").appendChild(n_tr);
}
</script>
<style>
form label {
display: block;
margin: 10px;
}
</style>
</head>

<body>
<form>

<label>
姓名:<input id="uname" /><span id="t_uname">内容不能为空</span>
密码:<input id="pass" /><span id="t_pass">内容不能为空</span>
邮箱:<input id="emil" /><span id="t_emil">内容不能为空</span>
<input onclick="add()" value="添加" type="button" />
</form>

<table id="tb1" border="1px" >
<tr>
<td>姓名</td>
<td>密码</td>
<td>邮箱</td>
<td>操作 </td>
</tr>
</table>
</body>
</html>