动态新增表格一行HTML页面源代码_html动态表格的完整代码,要完美的
时间: 2023-08-17 18:04:07 浏览: 41
以下是一个完美的HTML动态表格的完整代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态新增表格一行</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
table th, table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
vertical-align: top;
}
table th {
background-color: #f2f2f2;
}
table tfoot td {
text-align: right;
}
table tfoot button {
background-color: #008CBA;
border: none;
color: #fff;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin-top: 10px;
cursor: pointer;
border-radius: 4px;
}
table tfoot button:hover {
background-color: #006d9c;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><button onclick="addRow()">新增一行</button></td>
</tr>
</tfoot>
</table>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "<input type='text' name='name'>";
cell2.innerHTML = "<input type='text' name='age'>";
cell3.innerHTML = "<input type='text' name='gender'>";
}
</script>
</body>
</html>
```
上述代码中,除了前面提到的动态新增表格一行的实现,还加入了CSS样式的设计,使表格的外观更美观。样式包括表格的边框、背景色、单元格内边距、按钮的背景色、字体颜色等。通过CSS样式的设计,使表格看起来更加完美。