JS实现添加表格数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格数据新增</title>
</head>
<body>
<table border="1" id="table">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>班级</th>
<th>电话</th>
<th>操作</th>
</tr>
</table>
<br>
<br>
<input type="text" name="" placeholder="姓名" id="names">
<select name="" id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<input type="text" name="" placeholder="年龄" id="age">
<input type="text" name="" placeholder="班级" id="grade">
<input type="text" name="" placeholder="电话" id="phone">
<br>
<input type="button" value="添加信息" onclick="addInfo()">
<script>
var table = document.getElementById("table");
function addInfo()
{
var tr = document.createElement("tr");
var names = document.getElementById("names").value;
var sex = document.getElementById("sex").value;
var age = document.getElementById("age").value;
var grade = document.getElementById("grade").value;
var phone = document.getElementById("phone").value;
tr.innerHTML = "<td>"+names+"</td><td>"+sex+"</td><td>"+age+"</td><td>"+grade+"</td><td>"+phone+
"</td><td><a href='#' onclick='del(this)'>删除</a></td>";
table.appendChild(tr);
}
function del(obj)
{
//找到对应的父元素进行删除操作
table.removeChild(obj.parentNode.parentNode);
}
</script>
</body>
</html>
桂ICP备15001964号-1
