jquery - 使用 jQuery 或 CSS 将表格一分为二

Question

我有下表但无法访问她的html，我需要如下“划分”，左边是1x到6x的图，右边是7x到12x。

<table id="tbl1" class="tbl-payment-system" style="display: table;">
    <tbody><tr class="even">
        <th class="parcelas">Nº de Parcelas</th>
        <th class="valor">Valor de cada parcela</th>
    </tr>

    <tr class="even">
        <td class="parcelas">1X SEM JUROS</td>
        <td>R$   2.167,50</td>
    </tr>

    <tr>
        <td class="parcelas">2X SEM JUROS</td>
        <td>R$   1.083,75</td>
    </tr>

    <tr class="even">
        <td class="parcelas">3X SEM JUROS</td>
        <td>R$   722,50</td>
    </tr>

    <tr>
        <td class="parcelas">4X SEM JUROS</td>
        <td>R$   541,87</td>
    </tr>

    <tr class="even">
        <td class="parcelas">5X SEM JUROS</td>
        <td>R$   433,50</td>
    </tr>

    <tr>
        <td class="parcelas">6X SEM JUROS</td>
        <td>R$   361,25</td>
    </tr>

    <tr class="even">
        <td class="parcelas">7X SEM JUROS</td>
        <td>R$   309,64</td>
    </tr>

    <tr>
        <td class="parcelas">8X COM JUROS</td>
        <td>R$   295,75</td>
    </tr>

    <tr class="even">
        <td class="parcelas">9X COM JUROS</td>
        <td>R$   265,42</td>
    </tr>

    <tr>
        <td class="parcelas">10X COM JUROS</td>
        <td>R$   241,17</td>
    </tr>

    <tr class="even">
        <td class="parcelas">11X COM JUROS</td>
        <td>R$   234,12</td>
    </tr>

    <tr>
        <td class="parcelas">12X COM JUROS</td>
        <td>R$   217,62</td>
    </tr>

</tbody></table>

你建议我用 jquery 或 css 做这个的好方法吗？

Answer 1

啊，在看到预期结果的图片后，您可以使用 jQuery 来完成此操作:

var table = $('#tbl1'),
  tableRows = table.find('tbody tr'),
  half = Math.floor(tableRows.length / 2); // get the halfway point

table.find('thead tr').each(function() { // copy header into extra columns
  var row = $(this);
  row.append(row.clone().children()); // add extra headers for other half of table
});

tableRows.each(function(index) {
  if (index == half) return; // break out of loop if we have hit halfway
  
  var currentRow = $(this),
    otherHalf = tableRows.eq(index + half); // get row from bottom half

  if (otherHalf.length) { // if bottom row exists
    currentRow.append(otherHalf.children()); // append children to current row
    otherHalf.detach(); // remove bottom row
  } else { // if bottom row doesn't exist
    var columns = currentRow.children();
    columns.last().attr('colspan', columns.length); // must be odd number of rows so add colspan
    return; // break out of loop as we are halfway
  }
});

table {
  margin-bottom: 20px;
  width: 100%;
}
th {
  text-align: left;
  width: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
  <!-- put header into thead -->
  <thead>
    <tr>
      <th class="parcelas">Nº de Parcelas</th>
      <th class="valor">Valor de cada parcela</th>
    </tr>
  </thead>

  <tbody>
    <tr class="even">
      <!-- make sure even classes are on every other row -->
      <td class="parcelas">1X SEM JUROS</td>
      <td>R$ 2.167,50</td>
    </tr>

    <tr>
      <td class="parcelas">2X SEM JUROS</td>
      <td>R$ 1.083,75</td>
    </tr>

    <tr class="even">
      <td class="parcelas">3X SEM JUROS</td>
      <td>R$ 722,50</td>
    </tr>

    <tr>
      <td class="parcelas">4X SEM JUROS</td>
      <td>R$ 541,87</td>
    </tr>

    <tr class="even">
      <td class="parcelas">5X SEM JUROS</td>
      <td>R$ 433,50</td>
    </tr>

    <tr>
      <td class="parcelas">6X SEM JUROS</td>
      <td>R$ 361,25</td>
    </tr>

    <tr class="even">
      <td class="parcelas">7X SEM JUROS</td>
      <td>R$ 309,64</td>
    </tr>

    <tr>
      <td class="parcelas">8X COM JUROS</td>
      <td>R$ 295,75</td>
    </tr>

    <tr class="even">
      <td class="parcelas">9X COM JUROS</td>
      <td>R$ 265,42</td>
    </tr>

    <tr>
      <td class="parcelas">10X COM JUROS</td>
      <td>R$ 241,17</td>
    </tr>

    <tr class="even">
      <td class="parcelas">11X COM JUROS</td>
      <td>R$ 234,12</td>
    </tr>

    <tr>
      <td class="parcelas">12X COM JUROS</td>
      <td>R$ 217,62</td>
    </tr>

  </tbody>
</table>