<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学科分数填写表</title>
<style>
h2{
text-align: center;
}
tr{
text-align: center;
}
table{
margin: 0 auto;
}
#btn-container{
text-align: center;
}
</style>
</head>
<body>
<h2>学科分数统计表</h2>
<table id="myTable">
<tr>
<th>序号</th>
<th>姓名</th>
<th>学科</th>
<th>分数</th>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>小王</td>
<td>英语</td>
<td>145</td>
</tr>
<tr>
<td>3</td>
<td>小孔明</td>
<td>玄学</td>
<td>98</td>
</tr>
</table>
<div id="btn-container">
<button onclick='beginInsert()'>填写信息</button>
</div>
<script>
//首先我们找到了想要填写表格的内容的位置
function beginInsert(){
let content = document.querySelector('#myTable')
let userName = prompt('请输入姓名')
let userSubject = prompt('请输入学科')
let userScore = prompt('请输入分数')
let countTd = document.querySelectorAll('td')
let newIndex = countTd.length / 4 + 1
content.innerHTML += `
<tr>
<td>${newIndex}</td>
<td>${userName}</td>
<td>${userSubject}</td>
<td>${userScore}</td>
</tr>
`
}
</script>
</body>
</html>
浙公网安备 33010602011771号