CODEWITHSUNDEEP
jqueryhtmlcsshtml-table
Rodrigo Dias
Rodrigo Dias

Reputation: 177

Split table in two with jQuery or CSS

I have the following table but do not have access to her html, and I need "divide " as follows, on the left are the plots 1x to 6x, and the right side of the 7x to 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>

Do you suggest me any good way to do this with jquery or css ?

Upvotes: 0

Views: 550

Answers (2)

Pete
Pete

Reputation: 58422

Ah after seeing your image of the expected result, you can do this using 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>

Upvotes: 2

Ricky Ruiz
Ricky Ruiz

Reputation: 26731

SOLUTION:

CSS APPROACH:

To visually achieve this you can use flexbox. You will need to manually target each row with pseudo-class :nth-of-type as well as specifying a different flex order, example below:

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>

Upvotes: 1

Related Questions