Change table structure using JQUERY

Question

Change table structure using JQUERY

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I'm not very knowledgeable about JS, but I need to solve a problem using Jquery.

I am making a list of contacts using Bootstrap and a plugin called Bootstrap-Table that manages the filtering and paging issue and assembles the table automatically. But unfortunately it uses the table headers to populate it, and my layout has no headers (TH) because it is not linear. In order for me to do what I need, I thought about using JQUERY to reassemble the table by changing the displayed code (DOM).

My question initially is:

My table at the end has an output like this:

<tbody>
      <tr data-index="0">
          <td class="small" style="">Sector</td>
          <td class="small" style="">Name</td>
          <td class="small" style="">Phone Number</td>
      </tr>
      <tr data-index="1">
          <td class="small" style="">Sector</td>
          <td class="small" style="">Name</td>
          <td class="small" style="">Phone Number</td>
      </tr>
      <tr data-index="2">
          <td class="small" style="">Sector</td>
          <td class="small" style="">Name</td>
          <td class="small" style="">Phone Number</td>
      </tr>
</tbody>

I need to use .WRAP () to have an output like this:

<tbody>
      <tr data-index="0">
          <td class="small" style="">Sector</td>
          <td class="small" style="">Name</td>
</tr>
<tr>
          <td class="small" style="">Phone Number</td>
      </tr>
      <tr data-index="1">
          <td class="small" style="">Sector</td>
          <td class="small" style="">Name</td>
</tr>
<tr>
          <td class="small" style="">Phone Number</td>
      </tr>
      <tr data-index="2">
          <td class="small" style="">Sector</td>
          <td class="small" style="">Name</td>
</tr>
<tr>
          <td class="small" style="">Phone Number</td>
      </tr>
</tbody>

That is, I need the SECTOR and the NAME to stay in a line and put the phone in the next.

Can anyone help me?

Here, it follows my EXATA output, with all the cells and rows I really need to work on:

<tbody>
<tr data-index="0">
    <td class="small destaque" style="">SETOR 1</td> <!-- Linha 1-->
    <td class="small destaque" style="">NOME 1</td> <!-- Linha 1-->
    <td style="">RAMAL 1</td> <!-- Linha 2-->
    <td style="">CELULAR 1</td> <!-- Linha 2-->
    <td style="">EMAIL 1</td> <!-- Linha 2-->
    <td style="">TITULO</td> <!-- Linha 3-->
    <td style="">TEXTO 1</td> <!-- Linha 4-->
</tr><tr data-index="1">
    <td class="small destaque" style="">SETOR 2</td> <!-- Linha 1-->
    <td class="small destaque" style="">NOME 2</td> <!-- Linha 1-->
    <td style="">RAMAL 2</td> <!-- Linha 2-->
    <td style="">CELULAR 2</td> <!-- Linha 2-->
    <td style="">EMAIL 2</td> <!-- Linha 2-->
    <td style="">TITULO</td> <!-- Linha 3-->
    <td style="">TEXTO 2</td> <!-- Linha 4-->
</tr>
<tr data-index="2">
    <td class="small destaque" style="">SETOR 3</td> <!-- Linha 1-->
    <td class="small destaque" style="">NOME 3</td> <!-- Linha 1-->
    <td style="">RAMAL 3</td> <!-- Linha 2-->
    <td style="">CELULAR 3</td> <!-- Linha 2-->
    <td style="">EMAIL 3</td> <!-- Linha 2-->
    <td style="">TITULO</td> <!-- Linha 3-->
    <td style="">TEXTO 3</td> <!-- Linha 4-->
</tr>
</tbody>

Final Layout:

jquery twitter-bootstrap bootstrap-3

asked by anonymous 26.06.2015 / 23:23

2 answers

1

Explanation of the code:

I'm looking for the last <td> of each <tr>
I create a .clone() of it
Remove from <tr> o <td>
I create a new <tr> with my clone of <td>
I add the new <tr> AFTER of <tr> current

$(document).ready(function () {
   $('#tabelaEspecifica tr').each(function(index) {
      var tdPhone = $(this).find('td:last');
      var novoTd = tdPhone.clone();
      tdPhone.remove();
     
      $(this).after($('<tr/>').append(novoTd));
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="tabelaEspecifica">
  <tbody>
      <tr data-index="0">
          <td class="small" style="">Sector</td>
          <td class="small" style="">Name</td>
          <td class="small" style="">Phone Number</td>
      </tr>
      <tr data-index="1">
          <td class="small" style="">Sector</td>
          <td class="small" style="">Name</td>
          <td class="small" style="">Phone Number</td>
      </tr>
      <tr data-index="2">
          <td class="small" style="">Sector</td>
          <td class="small" style="">Name</td>
          <td class="small" style="">Phone Number</td>
      </tr>
  </tbody>
</table>

26.06.2015 / 23:33

Link in table tr Show contents of a JSON using PHP and separate the fields

score 3 · Accepted Answer

You can do this:

$('tr').each(function () {
    var $this = $(this);
    var last = $this.find('td').last();
    var newTR = $('<tr/>').append(last);
    newTR.insertAfter($this);
});

jsFiddle: link

Explained would be:

$('tr').each(function () {               // iterar todas as linhas
    var $this = $(this);                 // opcional, melhora performance
    var last = $this.find('td').last();  // vai buscar a ultima td de cada linha
    var newTR = $('<tr/>').append(last); // insere ess td numa nova linha
    newTR.insertAfter($this);            // insere a nova linha depois da que está a ser iterada
});