Verwenden Sie jQuery, um die Tabelle in divs umzuwandeln und vor jedem td anzuhängen

Ich versuche, alle Tabellen in Divs zu konvertieren und das th-HTML oder den Inhalt des th-in von jedem td hinzuzufügen, das in ein Div konvertiert wird.

Also würde mein Tisch so aussehen:

<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>

Und ich möchte es so umwandeln, dass es so aussieht:

<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>

Ich habe diesen Code gefunden, der fast funktioniert, aber ich kann herausfinden, wie ich ihn zum th machen kann, wenn es irgendwelche th gibt, und sie vor jeder td-Datenspanne hinzufügen.

$('.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>';
});

Jede Hilfe wäre soooo sehr dankbar !!

Antworten auf die Frage(2)

Ihre Antwort auf die Frage