Use jQuery para converter tabela para div e anexar th na frente de cada td
Eu estou tentando converter todas as tabelas para divs e adicionar o th html ou conteúdo do th em de cada td que é convertido em um div.
Então minha mesa ficaria assim:
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</table>
E eu quero convertê-lo assim é assim:
<div class="box">
<div class="row-fname"><span class="fname-label">TH Data</span> : <span class="fname-data">Data 1</span></div>
<div class="row-lname"><span class="lname-label">TH Data</span> : <span class="lname-data">Data 2</span></div>
<div class="row-address"><span class="address-label">TH Data</span> : <span class="address-data">Data 3</span></div>
<div class="row-city"><span class="city-label">TH Data</span> : <span class="city-data">Data 4</span></div>
<div class="row-state"><span class="state-label">TH Data</span> : <span class="state-data">Data 5</span></div>
Eu encontrei este código que quase funciona, mas posso descobrir como fazê-lo obter o th se houver algum th e adicioná-los antes do período de dados de cada td.
$('.content table').replaceWith(function() {
var html = '';
$('tr', this).each(function() {
html += '<div class="box grey-bg">';
$('th, td', this).each(function() {
html += '<span>' + $(this).html() + '</span>';
});
html += '</div>';
});
return '<div class="">' + html + '</div>';
});
Qualquer ajuda seria muuuuito muito apreciada !!