javascript - 将 "big"表拆分为更小的表

标签 javascript jquery html html-table

我想将一个“大”表(很多列)拆分为较小的表,例如每列 2 列。

有没有简单的方法来做到这一点?

我这里只有表http://jsfiddle.net/xy3UF/4/ .例如,我想每 2 列拆分一次。因此,我应该有一个包含 # 列的三个表,每个表包含大表中的 2 列。

期望的输出:http://jsfiddle.net/xy3UF/15/

最佳答案

function split($table, chunkSize) {
  var cols = $("th", $table).length - 1;
  var n = cols / chunkSize;

  for (var i = 1; i <= n; i++) {
     $("<br/>").appendTo("body");
     var $newTable = $table.clone().appendTo("body");
     for (var j = cols + 1; j > 1; j--) {
         if (j + chunkSize - 1 <= chunkSize * i || j > chunkSize * i + 1) {
             $('td:nth-child(' + j + '),th:nth-child(' + j + ')', $newTable).remove();
         }
     }
  }  
}

其中 $table 是表 jQuery 对象,chunkSize 是每个拆分 的大小。在您的示例中,将其称为 split($("table"), 2)。请注意,chunkSize 必须平均划分列数(不包括第一列)才能正常工作,例如,对于具有 7 列的表,有效 值为chunkSize 分别为 1、2 和 3。

DEMO .

关于javascript - 将 "big"表拆分为更小的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12080216/

相关文章:

javascript - Rails Controller 中的 Ajax 功能实现

javascript - 在卸载时处理页面?

javascript - casperjs滚动弹出层

javascript - 使用javascript使部分在点击时淡入淡出?

javascript - jQuery - 检测 div 是否有 2 个类

jquery - 如何查询选择另一个 Lit-Element 内的 Lit-Element

javascript - 显示每个相册的所有照片后换行

javascript - 单击将单选按钮值插入 mysql

jquery - 使用 Jquery 清除内联 CSS : background-color

html - css中带有倒半圆边的按钮