建立一个完整的html代码要求如下：包含一个有5列的表格五列分别为编号姓名身份账号密码；宽度为500px可以通过点击表格上方的按钮将填写在表单中的数据添加到表格中也可以通过点击表格第一列中的数据来删除一整行数据表格初始带有两条数据
<html>
<head>
<title>表格</title>
<style>
table {
width: 500px;
border-collapse: collapse;
}
table td, table th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
form {
margin-bottom: 20px;
}
</style>
</head>
<body>
<form>
<label for="num">编号：</label>
<input type="number" id="num" name="num"><br>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br>
<label for="identity">身份：</label>
<input type="text" id="identity" name="identity"><br>
<label for="account">账号：</label>
<input type="text" id="account" name="account"><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br>
<input type="button" value="添加" onclick="addRow()">
</form>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>身份</th>
<th>账号</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td onclick="deleteRow(this)">1</td>
<td>张三</td>
<td>学生</td>
<td>123456</td>
<td>abc123</td>
</tr>
<tr>
<td onclick="deleteRow(this)">2</td>
<td>李四</td>
<td>教师</td>
<td>654321</td>
<td>123abc</td>
</tr>
</tbody>
</table>
<script>
function addRow() {
var table = document.querySelector("table");
var num = document.querySelector("#num").value;
var name = document.querySelector("#name").value;
var identity = document.querySelector("#identity").value;
var account = document.querySelector("#account").value;
var password = document.querySelector("#password").value;
var newRow = table.insertRow();
var cell1 = newRow.insertCell();
var cell2 = newRow.insertCell();
var cell3 = newRow.insertCell();
var cell4 = newRow.insertCell();
var cell5 = newRow.insertCell();
cell1.innerHTML = num;
cell2.innerHTML = name;
cell3.innerHTML = identity;
cell4.innerHTML = account;
cell5.innerHTML = password;
}
<pre><code> function deleteRow(row) {
var table = document.querySelector("table");
table.deleteRow(row.parentNode.rowIndex);
}
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hbIN 著作权归作者所有。请勿转载和采集!