jQuery如何将一个表格在特定行数处分成两个表格

Question

我需要使用jQuery在特定行数将表格拆分成两个表格。这可行吗？

我已经搜索过了，但没有找到相关内容。jQuery非常强大，我认为这应该是可以实现的。

由于表格没有编号，所以jQuery需要索引行。

非常感谢您提供帮助。

C

- Cybercampbell

Answer 1

jQuery的切片方法在这种情况下会非常有用：文档在这里 在HTML中添加一张带有多行的表格：

<table id="mainTable">
<tr>
    <td>Row 1</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>

使用 jQuery 切割 n 行，创建新的表格实例并添加行：

<script type="text/javascript">
jQuery(document).ready(function() {
    var $mainTable = $("#mainTable");
    var splitBy = 5;
    var rows = $mainTable.find ( "tr" ).slice( splitBy );
    var $secondTable = $("#mainTable").parent().append("<table id='secondTable'><tbody></tbody></table>");
    $secondTable.find("tbody").append(rows);
    $mainTable.find ( "tr" ).slice( splitBy ).remove();
});
</script>

点击此处查看实际演示

- Dharmang

---

希望您的代码能够正常工作，并且可以在其他类似的问题中使用它。 :) http://stackoverflow.com/questions/23774929/splite-one-big-table-in-two-tables-based-on-content-of-third-column-in-each-row/23783302#23783302 - Mr.TK

Answer 2

这也可以使用clone()函数来完成。

var $mainTable = $("table.mainTable");
$mainTable.clone().appendTo($mainTable.parent()).find('tbody tr').slice(0, 4).remove();
$mainTable.find('tbody tr').slice(4).remove();

- planetClaire