用html创建一个可以点击按钮添加行数的表格宽度是500px列数是5
以下是用HTML创建一个可以点击按钮添加行数的表格，宽度为500px，列数为5：
<!DOCTYPE html>
<html>
<head>
<title>添加行数的表格</title>
<style>
table {
width: 500px;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 5px;
}
th {
background-color: #ccc;
}
td {
background-color: #fff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
</tbody>
</table>
<button onclick="addRow()">添加行</button>
<script>
function addRow() {
// 获取表格tbody元素
var tbody = document.getElementById("table-body");
// 创建一个新的<tr>元素
var row = document.createElement("tr");
// 创建5个新的<td>元素，并为它们设置内容
for (var i = 0; i < 5; i++) {
var cell = document.createElement("td");
cell.innerHTML = "新内容" + (i+1);
row.appendChild(cell);
}
// 将新的<tr>元素添加到表格tbody中
tbody.appendChild(row);
}
</script>
</body>
</html>
``
原文地址: https://www.cveoy.top/t/topic/hbHK 著作权归作者所有。请勿转载和采集!