建立一个完整的html代码要求如下：包含一个有5列的表格五列分别为编号姓名身份账号密码；宽度为500px可以通过点击表格上方的按钮将填写在表单中的数据添加到表格中点击每个编号会弹出一个两个选项的弹窗选择确定来删除一整行数据表格初始带有两条数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table Demo</title>
<style>
table {
width: 500px;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid black;
text-align: center;
}
th {
background-color: #ccc;
}
form {
margin-bottom: 20px;
}
</style>
</head>
<body>
<form>
<label for="id">编号:</label>
<input type="text" id="id"><br>
<label for="name">姓名:</label>
<input type="text" id="name"><br>
<label for="identity">身份:</label>
<input type="text" id="identity"><br>
<label for="account">账号:</label>
<input type="text" id="account"><br>
<label for="password">密码:</label>
<input type="password" id="password"><br>
<button type="button" id="add-btn">添加数据</button>
</form>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>身份</th>
<th>账号</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>管理员</td>
<td>admin001</td>
<td>123456</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>普通用户</td>
<td>user002</td>
<td>654321</td>
</tr>
</tbody>
</table>
<script>
// 获取表格和表单元素
const table = document.querySelector('table');
const form = document.querySelector('form');
<pre><code> // 添加数据按钮点击事件
document.querySelector('#add-btn').addEventListener('click', function() {
// 获取表单数据
const id = document.querySelector('#id').value;
const name = document.querySelector('#name').value;
const identity = document.querySelector('#identity').value;
const account = document.querySelector('#account').value;
const password = document.querySelector('#password').value;
// 创建新行并添加到表格
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>${id}</td>
<td>${name}</td>
<td>${identity}</td>
<td>${account}</td>
<td>${password}</td>
`;
table.querySelector('tbody').appendChild(newRow);
// 清空表单数据
form.reset();
});
// 点击编号弹出删除确认框
table.addEventListener('click', function(event) {
if (event.target.tagName === 'TD' && event.target.cellIndex === 0) {
const confirmResult = confirm('确定要删除这一行数据吗？');
if (confirmResult) {
table.deleteRow(event.target.parentNode.rowIndex);
}
}
});
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hbIP 著作权归作者所有。请勿转载和采集!