<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 400px;
border-collapse: collapse;
border: 1px solid #ccc;
margin-top: 50px;
}
table tr th,
table tr td {
width: 100px;
text-align: center;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<form id="stu_form" action="">
<p>姓 名:<input type="text" name="name" id="name"></p>
<p>年 龄:<input type="text" name="age" id="age"></p>
<p>身 高:<input type="text" name="height" id="height"></p>
<p>电 话:<input type="text" name="tel" id="tel"></p>
<button type="button" id="sub_btn">添加学生</button>
<button type="reset">再添加一个</button>
</form>
<table id="stu_info">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
<th>电话</th>
</tr>
</thead>
<tbody id="stu_tbody">
</tbody>
</table>
<script>
sub_btn.addEventListener('click', function() {
let stu_name = document.getElementById('name')
let stu_age = document.getElementById('age')
let height = document.getElementById('height')
let tel = document.getElementById('tel')
stu_tbody.innerHTML +=
`
<tr>
<td>${stu_name.value}</td>
<td>${stu_age.value}</td>
<td>${height.value}</td>
<td>${tel.value}</td>
</tr>
`
})
</script>
</body>
</html>
js-利用字符模板来动态添加表格
最新推荐文章于 2022-11-06 14:44:37 发布