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>
<pre><code><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>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/oED6 著作权归作者所有。请勿转载和采集!