Não sou muito conhecedor de JS, mas preciso resolver um problema usando Jquery.
Estou fazendo uma lista de contatos usando Bootstrap e um plugin chamado Bootstrap-Table que gerencia a questão de filtro e paginação e monta a tabela automáticamente. Mas infelizmente ele usa os cabeçalhos da tabela para populá-la, e meu layout não tem cabeçalhos (TH), pois não é linear. Para eu conseguir fazer o que necessito, pensei em usar o JQUERY para remontar a tabela alterando o código exibido (DOM).
Minha pergunta inicialmente é:
Minha tabela no final tem uma saída como esta:
<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>
Eu preciso usar o .WRAP() para que tenha uma saída assim:
<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>
Ou seja , preciso que o SETOR e o NOME fiquem em uma linha e colocar o telefone na pŕoxima.
Alguém pode me ajudar?
Aqui, segue minha saída EXATA, com todas as células e linhas que realmente preciso trabalhar:
<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>
Layout final: