从大型单个表动态创建多个表

时间:2011-01-20 18:27:49

标签: jquery split html-table

我仍然坚持这个问题。我想基于列分隔符从单个表中动态创建多个表。可以说,我在表中有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>

任何帮助将不胜感激

2 个答案:

答案 0 :(得分:1)

我做了一个功能(我认为)做你想做的事。这样称呼:

split_up_table(master_table, number_of_columns);

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

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

答案 1 :(得分:1)

这是执行拆分的jQuery代码。这样做3列“while((j <3)...”,你可以把它变成一个函数并传入值。代码是相当自我解释的。不要忘记“clone()”方法到“复制并粘贴”而不是“剪切和粘贴”。

此致             尼尔

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);
}