table动态添加行和列
时间: 2023-08-28 19:06:38 浏览: 97
动态添加表格行和列可以使用 JavaScript 或 jQuery。
添加行:
使用 JavaScript:
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>20</td>
</tr>
</table>
<button onclick="addRow()">添加行</button>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(); // 插入新行
var cell1 = row.insertCell(0); // 插入单元格
var cell2 = row.insertCell(1);
cell1.innerHTML = "新姓名"; // 设置单元格内容
cell2.innerHTML = "新年龄";
}
</script>
使用 jQuery:
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>20</td>
</tr>
</table>
<button onclick="addRow()">添加行</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function addRow() {
$("#myTable").append("<tr><td>新姓名</td><td>新年龄</td></tr>"); // 添加行
}
</script>
添加列:
使用 JavaScript:
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>20</td>
</tr>
</table>
<button onclick="addColumn()">添加列</button>
<script>
function addColumn() {
var table = document.getElementById("myTable");
var header = table.getElementsByTagName("th"); // 获取表头
for (var i = 0; i < header.length; i++) {
var newCell = header[i].insertCell(-1); // 在表头插入单元格
newCell.innerHTML = "新列"; // 设置单元格内容
}
var row = table.getElementsByTagName("tr"); // 获取表格所有行
for (var i = 0; i < row.length; i++) {
var newCell = row[i].insertCell(-1); // 在每行末尾插入单元格
newCell.innerHTML = "新单元格"; // 设置单元格内容
}
}
</script>
使用 jQuery:
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>20</td>
</tr>
</table>
<button onclick="addColumn()">添加列</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function addColumn() {
$("#myTable tr").each(function() {
$(this).append("<td>新单元格</td>"); // 在每行末尾插入单元格
});
$("#myTable th:last-child").after("<th>新列</th>"); // 在表头插入新列
}
</script>