创建一个完整的html：有一个5列的表格可以通过点击按钮将5个表单的数据添加进去也可以通过点击按钮删除某条数据
<!DOCTYPE html>
<html>
<head>
<title>5列表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
button {
margin-top: 10px;
padding: 8px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>城市</th>
<th>职业</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<form>
<label>姓名：</label>
<input type="text" id="name"><br>
<label>年龄：</label>
<input type="number" id="age"><br>
<label>性别：</label>
<select id="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br>
<label>城市：</label>
<input type="text" id="city"><br>
<label>职业：</label>
<input type="text" id="job"><br>
<button type="button" onclick="addData()">添加数据</button>
<button type="button" onclick="deleteData()">删除数据</button>
</form>
<script>
var data = [];
var tbody = document.getElementById('tbody');
<pre><code> function addData() {
var name = document.getElementById('name').value;
var age = document.getElementById('age').value;
var gender = document.getElementById('gender').value;
var city = document.getElementById('city').value;
var job = document.getElementById('job').value;
data.push({name: name, age: age, gender: gender, city: city, job: job});
renderData();
}
function deleteData() {
data.pop();
renderData();
}
function renderData() {
tbody.innerHTML = '';
data.forEach(function(item) {
var tr = document.createElement('tr');
var tdName = document.createElement('td');
tdName.innerText = item.name;
tr.appendChild(tdName);
var tdAge = document.createElement('td');
tdAge.innerText = item.age;
tr.appendChild(tdAge);
var tdGender = document.createElement('td');
tdGender.innerText = item.gender;
tr.appendChild(tdGender);
var tdCity = document.createElement('td');
tdCity.innerText = item.city;
tr.appendChild(tdCity);
var tdJob = document.createElement('td');
tdJob.innerText = item.job;
tr.appendChild(tdJob);
tbody.appendChild(tr);
});
}
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hbIi 著作权归作者所有。请勿转载和采集!