从大单表动态创建多表答案

【问题标题】：Dynamically creating multiple table from a large single table从大单表动态创建多表
【发布时间】：2011-01-20 18:27:48
【问题描述】：

我仍然被这个问题困扰。我想根据列分隔符从单个表动态创建多个表。比方说，我在一个表中有 11 列，并且分隔符是 3。因此，将有三个具有三列的表，而第四个表将具有两列。我还想在每个表中重复标题。这是示例 HTML 表。

<table class="PrintTable">
<tr>
  <td>
    <table>
        <thead>
            <tr><th>Type Of Transaction</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Name</td>
            </tr>
            <tr>
                <td>Age</td>
            </tr>
        </tbody>
    </table>
  </td>
  <td>
    <table>
        <thead>
            <tr><th>2006</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Andi</td>
            </tr>
            <tr>
                <td>25</td>
            </tr>
        </tbody>
    </table>
  </td>
  <td>
    <table>
        <thead>
            <tr><th>2007</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>tom</td>
            </tr>
            <tr>
                <td>26</td>
            </tr>
        </tbody>
    </table>
  </td>
  <td>
    <table>
        <thead>
            <tr><th>2008</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
            </tr>
            <tr>
                <td>28</td>
            </tr>
        </tbody>
    </table>
  </td>
  <td>
    <table>
        <thead>
            <tr><th>2009</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Horse</td>
            </tr>
            <tr>
                <td>28</td>
            </tr>
        </tbody>
    </table>
  </td>
  <td>
    <table>
        <thead>
            <tr><th>2011</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Twinkle</td>
            </tr>
            <tr>
                <td>28</td>
            </tr>
        </tbody>
    </table>
  </td>
  <td>
    <table>
        <thead>
            <tr><th>2012</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Haris</td>
            </tr>
            <tr>
                <td>28</td>
            </tr>
        </tbody>
    </table>
  </td>
   <td>
    <table>
        <thead>
            <tr><th>2013</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>LEno</td>
            </tr>
            <tr>
                <td>28</td>
            </tr>
        </tbody>
    </table>
  </td>
  <td>
    <table>
        <thead>
            <tr><th>2014</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Jay</td>
            </tr>
            <tr>
                <td>28</td>
            </tr>
        </tbody>
    </table>
  </td>
</tr>

预期输出

<table class="PrintTable">
<tr>
  <td>
    <table>
        <thead>
            <tr><th>Type Of Transaction</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Name</td>
            </tr>
            <tr>
                <td>Age</td>
            </tr>
        </tbody>
    </table>
  </td>
  <td>
    <table>
        <thead>
            <tr><th>2006</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Andi</td>
            </tr>
            <tr>
                <td>25</td>
            </tr>
        </tbody>
    </table>
  </td>
  <td>
    <table>
        <thead>
            <tr><th>2007</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>tom</td>
            </tr>
            <tr>
                <td>26</td>
            </tr>
        </tbody>
    </table>
  </td>
  <td>
    <table>
        <thead>
            <tr><th>2008</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
            </tr>
            <tr>
                <td>28</td>
            </tr>
        </tbody>
    </table>
  </td>

</tr>

</table>


<table class="PrintTable">
    <tr>
      <td>
        <table>
            <thead>
                <tr><th>Type Of Transaction</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>Name</td>
                </tr>
                <tr>
                    <td>Age</td>
                </tr>
            </tbody>
        </table>
      </td>
      <td>
        <table>
            <thead>
                <tr><th>2009</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>Horse</td>
                </tr>
                <tr>
                    <td>28</td>
                </tr>
            </tbody>
        </table>
      </td>
      <td>
        <table>
            <thead>
                <tr><th>2011</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>Twinkle</td>
                </tr>
                <tr>
                    <td>28</td>
                </tr>
            </tbody>
        </table>
      </td>
      <td>
        <table>
            <thead>
                <tr><th>2012</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>Haris</td>
                </tr>
                <tr>
                    <td>28</td>
                </tr>
            </tbody>
        </table>
      </td>
    </tr>
</table>

<table class="PrintTable">
    <tr>
      <td>
        <table>
            <thead>
                <tr><th>Type Of Transaction</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>Name</td>
                </tr>
                <tr>
                    <td>Age</td>
                </tr>
            </tbody>
        </table>
      </td>
       <td>
        <table>
            <thead>
                <tr><th>2013</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>LEno</td>
                </tr>
                <tr>
                    <td>28</td>
                </tr>
            </tbody>
        </table>
      </td>
      <td>
        <table>
            <thead>
                <tr><th>2014</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>Jay</td>
                </tr>
                <tr>
                    <td>28</td>
                </tr>
            </tbody>
        </table>
      </td>
    </tr>

</table>

任何帮助将不胜感激

【问题讨论】：

标签： jquery split html-table

【解决方案1】：

我做了一个（我认为）做你想做的事情的函数。像这样称呼它：

split_up_table(master_table, number_of_columns);

...它将返回一个新的较小表的数组。每个都有主表的头部，每个都有正确的列数。

看看你的想法：http://jsfiddle.net/sdleihssirhc/43gHN/

【讨论】：

非常感谢你拯救了我的一天
@sdleihssirhc 小提琴已经死了，你能发布代码吗？

【解决方案2】：

这里是进行拆分的 jQuery 代码。这对 3 列“while((j

问候尼尔

var printTable     = $('table.PrintTable');
var printTableTds  = $('table.PrintTable>tbody>tr>td');
var numberOfTds    = $(printTableTds).size() - 1;
var tableHeader    = $(printTableTds).eq(0);
var i = 1, j;

while (i < numberOfTds) {
    newTable        = $('<table class="printTable" />');
    newTableBody    = $('<tbody />').appendTo(newTable);                      
    newTableRow     = $('<tr />').appendTo(newTableBody);

    $(tableHeader).clone().appendTo(newTableRow);

    j = 0;
    while ((j++ < 3) && (i <= numberOfTds)) {
        $(printTableTds).eq(i++).clone().appendTo(newTableRow);
    }
    $(newTable).insertBefore(printTable);
}

【讨论】：