帮我写一个html页面,要求用户可以输入自己的运动项目、运动次数、运动日期、运动时长等数据,运动项目要求只在深蹲、俯卧撑、引体向上里选择,然后页面将用户选择的数据做成一个表格并呈现到页面上,表格带有按钮可以将此表格从页面上删除
时间: 2024-01-24 15:16:57 浏览: 24
好的,我来帮你完成这个任务。以下是实现此功能的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>运动记录表</title>
<style>
table {
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
button {
margin-top: 20px;
padding: 10px;
background-color: #f44336;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>运动记录表</h1>
<form>
<label for="sport">运动项目:</label>
<select id="sport" name="sport">
<option value="deepSquat">深蹲</option>
<option value="pushUp">俯卧撑</option>
<option value="pullUp">引体向上</option>
</select><br>
<label for="times">运动次数:</label>
<input type="number" id="times" name="times"><br>
<label for="date">运动日期:</label>
<input type="date" id="date" name="date"><br>
<label for="duration">运动时长:</label>
<input type="number" id="duration" name="duration">分钟<br>
<button type="button" onclick="addRow()">添加</button>
</form>
<table id="table">
<thead>
<tr>
<th>运动项目</th>
<th>运动次数</th>
<th>运动日期</th>
<th>运动时长</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button type="button" onclick="clearTable()">清空表格</button>
<script>
function addRow() {
var sport = document.getElementById("sport").value;
var times = document.getElementById("times").value;
var date = document.getElementById("date").value;
var duration = document.getElementById("duration").value;
if(sport && times && date && duration) {
var table = document.getElementById("table").getElementsByTagName("tbody")[0];
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = sport;
cell2.innerHTML = times;
cell3.innerHTML = date;
cell4.innerHTML = duration;
cell5.innerHTML = '<button type="button" onclick="deleteRow(this)">删除</button>';
document.getElementById("sport").value = "";
document.getElementById("times").value = "";
document.getElementById("date").value = "";
document.getElementById("duration").value = "";
} else {
alert("请填写完整信息!");
}
}
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function clearTable() {
var table = document.getElementById("table").getElementsByTagName("tbody")[0];
while(table.rows.length > 0) {
table.deleteRow(0);
}
}
</script>
</body>
</html>
```
在页面中,我们使用了一个表单来接收用户输入的数据,并添加了一个“添加”按钮,点击该按钮会将用户输入的数据添加到表格中。
表格中有一个“删除”按钮,点击该按钮可以删除当前行的数据。
最后,我们在页面底部添加了一个“清空表格”的按钮,点击该按钮可以将整个表格清空。