htmltable表格拆分
时间: 2023-07-24 17:38:09 浏览: 152
您可以使用JavaScript来拆分HTML表格。以下是一个简单的示例代码,它将把一个10行4列的表格拆分成两个5行4列的表格:
```html
<table id="myTable">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
<td>Row 1, Column 4</td>
</tr>
...
<tr>
<td>Row 10, Column 1</td>
<td>Row 10, Column 2</td>
<td>Row 10, Column 3</td>
<td>Row 10, Column 4</td>
</tr>
</table>
<script>
var table = document.getElementById("myTable");
var numRows = table.rows.length;
var numCols = table.rows[0].cells.length;
var halfRows = Math.ceil(numRows / 2);
// create first table
var table1 = document.createElement("table");
for (var i = 0; i < halfRows; i++) {
var row = table.rows[i].cloneNode(true);
table1.appendChild(row);
}
table.parentNode.insertBefore(table1, table);
// create second table
var table2 = document.createElement("table");
for (var i = halfRows; i < numRows; i++) {
var row = table.rows[i].cloneNode(true);
table2.appendChild(row);
}
table.parentNode.insertBefore(table2, table);
// remove original table
table.parentNode.removeChild(table);
</script>
```
在上面的代码中,我们首先获取原始表格的行数和列数,然后计算出每个新表格应该有的行数。接下来,我们使用`cloneNode`方法复制原始表格中的每一行,并将其添加到新的表格中。最后,我们使用`insertBefore`和`removeChild`方法将新的表格插入到原始表格的位置,并将原始表格删除。
阅读全文