将“大”表拆分为较小的表

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将“大”表拆分为较小的表相关的知识,希望对你有一定的参考价值。

我想将一个“大”表(很多列)分成小表,每个例如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

另一答案

我制作了更好的表格分割功能版本,支持修复列(在所有表格中重复),浪费了大量时间:

function range(start, end) {
  var array = new Array();
  for (var i = start; i <= end; i++) {
    array.push(i);
  }
  return array;
}

function splitTables($tables, chunkSize, fixCols) {
  $table = $($tables);
  console.log('fixCols :', fixCols);
  fixCols = fixCols || [];
  console.log('fixCols :', fixCols);
  fixCols = fixCols.sort();
  console.log('fixCols :', fixCols);
  //chunkSize -= fixCols.length;
  var rowLength = $('tr:first>*', $table).length;
  console.log('total length:', rowLength);
  var n = Math.ceil(rowLength / chunkSize);
  var bufferTables = [];
  var numberList = range(1, rowLength);

  for (var i = 1; i <= n; i++) {
    var colList = fixCols.slice(0);
    //console.log('fixCols :',fixCols);
    //console.log('colList :',colList);
    console.log('numberList :', numberList);
    while (colList.length < chunkSize && numberList.length > 0) {
      var index = numberList.shift();
      console.log(index, colList);
      if (colList.indexOf(index) == -1) {
        colList.push(index);
      }
    }

    console.log('col list:', colList);
    var $newTable = $table.clone(true)
    for (var index = 1;
      (index <= rowLength); index++) {
      if (colList.indexOf(index) == -1) {
        console.log('removing:', index);
        $('tr>:nth-child(' + index + ')', $newTable).hide();
      }
    }
    bufferTables.push($newTable)
  }

  $(bufferTables.reverse()).each(function(i, $el) {
    $('<br/>').insertAfter($table);
    $el.insertAfter($table);
  });
  $table.remove();

}

$(function() {
  $('#sbtn').click(function() {
    splitTables($("#tb"), 3, [1]);
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sbtn">Split Table !</button>

<table border="1" id="tb">
  <thead>
    <tr>
      <th>0</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
      <td>$500</td>
      <td>$300</td>
      <td>$700</td>
      <td>$600</td>
      <td>$1000</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Home</td>
      <td>$100</td>
      <td>$200</td>
      <td>$200</td>
      <td>$300</td>
      <td>$400</td>
      <td>$500</td>
    </tr>
    <tr>
      <td>Work</td>
      <td>$80</td>
      <td>$300</td>
      <td>$100</td>
      <td>$400</td>
      <td>$200</td>
      <td>$500</td>
    </tr>
  </tbody>
</table>
另一答案

这更简单。

1)标记TR:

<tr><td>some</td><!-- SPLITHERE -->

2)拆分表:

document.body.innerhtml = document.body.innerHTML.replace(/<!-- SPLITHERE -->s*</tr>/i, '</tr></table></div><div class="eachPage"><table class="items">');

注意:您必须对该表的父元素(在我的示例中为body)进行innerHTML更改,而不是表本身,这不起作用。

另一答案

使用XSLT可以轻松解决问题。

请访问:Split large table into several smaller tables

以上是关于将“大”表拆分为较小的表的主要内容,如果未能解决你的问题,请参考以下文章

如何将大数组拆分为较小的数组?

使用 Python 按行号将大文本文件拆分为较小的文本文件

将大减速器拆分为较小的减速器

如何将 mysqldump 的输出拆分为较小的文件?

使用 PHP 将大型 KML 文件拆分为较小的文件

如何将列表拆分为较小的列表?