将HTML表划分为多个表JQuery

时间:2011-01-11 18:48:05

标签: jquery 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>

预期产出: -

<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>

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:3)

要破坏表格,只有前3列:

newT = jQuery('<tr></tr>');
jQuery('.PrintTable table:lt(3)').each(
 function(i,el){
  td = jQuery('<td/>');
  td.append(jQuery(el).clone());
  newT.append(td);
 });
jQuery('.PrintTable').html(newT);

如果要将第一列保留为标题以便进一步中断,请使用:first选择器并将其添加到列的交集处。

jQuery('.PrintTable :gt(3):lt(6)')

您将获得第一列以及索引3和6之间的列。

您实际上可以合并2,因此您只需更改2个索引即可创建正确的表。 这是您需要的代码。

newT = jQuery('<tr></tr>');
jQuery('.PrintTable table:first').add('.PrintTable table:gt(0):lt(3)').each(
 function(i,el){
  td = jQuery('<td/>');
  td.append(jQuery(el).clone());
  newT.append(td);
 });
jQuery('.PrintTable').html(newT);

代码的范围

newT将保存一个新的tr元素,我们将添加新的表格内容。我们将用这个替换旧的top tr元素。

然后,我们通过.PrintTable table选择所有子表,使用:first获取第一个标题列,并添加使用:gt(index):lt(index)选择的其他列,我们通过要使用的索引。 gt =大于,lt =低于。

我们现在拥有了我们想要使用的所有列,因此我们使用each()函数将每个元素添加到准备好的td

之后我们可以将旧的td与新的td交换,用旧的替换旧表。


你真正想要做的是,使其不那么模糊的表格代码,提高可读性和语法,以及因此可打印性和时尚性如下:

在一个表中构建它,因为它只是一个数据表。将<th>标记用于非<thead>标记中的标题。

<table>
    <thead>
        <tr>
          <th>Type Of Transaction</th>
          <th>2006</th>
          <th>2007</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Name</th>
            <td>Andi</td>
            <td>tom</td>
        </tr>
        <tr>
            <th>Age</th>
            <td>25</td>
            <td>26</td>
        </tr>
    </tbody>
</table>