Question

如何使用jquery将html表分成多个表，例如我想将表分成两行，然后重复标题。这是我的HTML表格的例子。

    <table border="1" id="mainTable">
    <tr>
        <th>header 1</th>
        <th>header 2</th>
        <th>header 3</th>
        <th>header 4</th>
    </tr>
    <tr>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
    </tr>
    <tr>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
    </tr>
    <tr>
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
    </tr>
</table>

预期产出：

    <table border="1" id="mainTable">
    <tr>
        <th>header 1</th>
        <th>header 2</th>
        <th>header 3</th>
        <th>header 4</th>
    </tr>
    <tr>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
    </tr>
</table>

<table border="1" id="mainTable">
    <tr>
        <th>header 1</th>
        <th>header 2</th>
        <th>header 3</th>
        <th>header 4</th>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
    </tr>
    <tr>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
    </tr>
</table>

<table border="1" id="mainTable">
    <tr>
        <th>header 1</th>
        <th>header 2</th>
        <th>header 3</th>
        <th>header 4</th>
    </tr>
    <tr>
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
    </tr>
</table>

提前致谢：）

Answer 1

这应该做你想要的：

var $main = $('#mainTable'),
    $head= $main.find('tr:first'),
    $extraRows = $main.find('tr:gt(2)');

for( var i = 0; i < $extraRows.length; i = i+2){
   $('<table>').append($head.clone(), $extraRows.slice(i,i+2)).appendTo($main.parent()); 
}

的 DEMO

Answer 2

首先在原始表格中引入<thead>和<tbody>部分。然后遍历tbody行并构建新表，如下所示：

$(function() {
  var mt = $('.mainTable'),
      dv = $('<div/>'),
      rows = $('tbody tr',mt).clone(),
      ln = rows.length,
      ntc = 1;
  for( var i = 0; i < ln; i = i + 2 ) {
    var nt = mt.clone().toggleClass('mainTable newTable');
    $('tbody', nt).html( rows.eq(i).clone() );
    if( i + 2 <= ln ) {
      $('tbody',nt).append( rows.eq(i+1).clone() );
    }
    dv.append( '<h1>New Table ' + ntc + '</h1>' );
    dv.append( nt );
    ntc++;
  }
  mt.after( dv.html() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <table border="1" class="mainTable">
      <thead>
    <tr>
        <th>header 1</th>
        <th>header 2</th>
        <th>header 3</th>
        <th>header 4</th>
    </tr>
        </thead>
      <tbody>
    <tr>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
    </tr>
    <tr>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
    </tr>
    <tr>
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
    </tr>
        </tbody>
</table>

在hquery中将html表划分为多个表

2 个答案: