Użyj jQuery, aby przekonwertować tabelę na div i dodać th przed każdym td
Usiłuję przekonwertować wszystkie tabele na div i dodać tht html lub zawartość th z każdego td, który jest konwertowany na div.
Więc mój stół wyglądałby tak:
<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>
I chcę to przekonwertować, aby wyglądało tak:
<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>
Znalazłem ten kod, który prawie działa, ale może dowiedzieć się, jak sprawić, by był th, jeśli są jakieś th i dodać je przed rozpiętością danych każdego 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>';
});
Każda pomoc byłaby bardzo mile widziana !!