Change table structure using JQUERY

Asked

Viewed 471 times

1

I am not very knowledgeable of JS, but I need to solve a problem using Jquery.

I’m making a contact list using Bootstrap and a plugin called Bootstrap-Table that manages the issue of filter and pagination and automatically mounts the table. But unfortunately it uses table headers to populate it, and my layout has no headers (TH), as it is not linear. In order to be able to do what I need, I thought to use 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 on a line and put the phone on the phone.

Can someone help me?

Here, follow my EXACT output, with all the cells and lines 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:

inserir a descrição da imagem aqui

jquery twitter-bootstrap bootstrap-3

2 answers

3


You can do it like this:

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

jsFiddle: http://jsfiddle.net/8c1xbpxy/

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
});
  • 1

    Thank you so much for the answer. It met 100% of what I asked. Actually it was a simplified version]of what I have. But in order to be able to conclude, I believe that something must be modified. I updated my question with the EXACT output code. You could see how to apply jquery in this situation ?

  • @Leibovich in this case I think this is what you need: http://jsfiddle.net/8c1xbpxy/1/ because, it is always preferable to put the exact code. I hope it helps!

  • @Is this what you’re looking for? -> http://jsfiddle.net/8c1xbpxy/1/

  • Almost that... Only line 3 was missing (and maybe there is a 4). Is there any way I can use the class (CLASS) to define the line number of td? I ask this because it makes it easy to add new. I can set to line i a class . line1 to 2, Linha2 and so on. If not, what would be the logic for me to try each TR 4 lines (according to the image I put in the question)? Pros, @Sergio, thank you so much for your help. I’m trying to understand JS better but it’s like learning Russian. .rs.. goes slowly

  • Just making the image clearer, the only text fixed on it is the "Remarks" and after that comes another Ell with text, just like the previous ones. Then I would have : line 1: Sector and Name Line 2: Extension , Cellular and Email Line 3 : Remarks Line 4: Text of remarks

  • @Leibovich I don’t see any td called observations... Take a look here: -> http://jsfiddle.net/8c1xbpxy/2/ I’m starting to think you’d better do that when you assemble the table... you can join the code with which you assemble the table?

  • Unfortunately my table is automatically created by Bootstrap-Table with the data that comes from Mysql. But I recreated the structure and can be seen here: http://www.bootply.com/vHnJnV9qTI . But if you think the creation code helps more, I can try creating a new bootply with a "json" file to simulate the database data

  • @Leibovich and why not change what comes from Mysql to JSON to be already right? if this is not possible it is preferable to change the JSON than to change the table in the DOM.

  • is Just what I do. I do a search in Mysql and load an Array and transform with json_enconde in PHP. Unfortunately the bootstrap table plugin does not provide the possibility of a non-linear table formatting, as is mine. (I have already talked to the developers, and it is something that is being studied for future versions.) . So the only way I can adjust my layout, as far as I can imagine, would be to adjust the DOM. I can’t give up the bootstrap-table plugin, because I have other features that depend on it

  • @Leibovich ok, good explanation. And then you saw my comment? -> http://answall.com/questions/71462/alterar-structurede-tabela-usando-jquery/71465?noredirect=1#comment147021_71465

  • You updated your example. Only 1 line is missing above TEXT XXXX , which would be the TITLE (leaving this TITLE as line 3 and TEXT XXX as line 4). Again, thanks for your patience and help.

  • @Leibovich but in your HTML you have in question there is no right line?

  • You’re right. I don’t know why I didn’t post this Title line when I posted it. I updated HTML

  • @Leibovich ok, I see it. Is that how you look? -> http://jsfiddle.net/8c1xbpxy/3/

  • 1

    Perfect! This is it

Show 10 more comments

1

Explanation of the code:

  • I’m looking for the last <td>of each <tr>

  • I create a .clone() his

  • Removed from <tr> the <td>

  • I create a new <tr> with my clone of <td>

  • I add the new <tr> AFTERWARD 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>

<table id="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>

  • Thank you so much for the answer. It met 100% of what I asked. Actually it was a simplified version]of what I have. But in order to be able to conclude, I believe that something must be modified. I updated my question with the EXACT output code. You could see how to apply jquery in this situation ?

Browser other questions tagged jquery twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.