使用jQuery或CSS将表拆分为两个

时间：2016-06-30 14:30:50

标签： jquery html css html-table

我有下表，但无法访问她的HTML，我需要＆＃34;除去＆＃34;如下图所示，左边是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做任何好方法吗？

2 个答案:

答案 0 :(得分：1)

在看到预期结果的图像后，您可以使用jQuery执行此操作：

＆＃13;
＆＃13; 
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
  }
});
＆＃13; 
table {
  margin-bottom: 20px;
  width: 100%;
}
th {
  text-align: left;
  width: 25%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

<强> SOLUTION：

CSS APPROACH：

要直观地实现此目的，您可以使用flexbox。您需要使用伪类:nth-of-type手动定位每一行，并指定另一个flex order，例如：

JSFiddle

CODE SNIPPET 

.tbl-payment-system {
  display: flex !important;
  background-color: #064288;
}

tbody {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

tr:first-child {
  width: 100%;
}

tr:not(:first-child) {
  color: #fff;
  width: 50%;
}

.parcelas + td {
  color: #FFCB61;
  font-weight: bold;
}

tr:nth-of-type(2) {
  order: 1;
}

tr:nth-of-type(8) {
  order: 2;
}

tr:nth-of-type(3) {
  order: 3;
}

tr:nth-of-type(9) {
  order: 4;
}

tr:nth-of-type(4) {
  order: 5;
}

tr:nth-of-type(10) {
  order: 6;
}

tr:nth-of-type(5) {
  order: 7;
}

tr:nth-of-type(11) {
  order: 8;
}

tr:nth-of-type(6) {
  order: 9;
}

tr:nth-of-type(12) {
  order: 10;
}

tr:nth-of-type(7) {
  order: 11;
}

tr:nth-of-type(13) {
  order: 12;
}
<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>

相关问题
最新问题