Я пытаюсь преобразовать все таблицы в div и добавить th html или содержимое th in from каждого td, который преобразуется в div .
Таким образом, моя таблица будет выглядеть так:
<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>
И я хочу преобразовать ее так, чтобы она выглядела так:
<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>
Я нашел этот код, который почти работает, но я могу выяснить, как заставить его получить th, если есть любые th и добавьте их перед каждым диапазоном данных 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>';
});
Будем очень признательны за любую помощь!!