Use jQuery to convert table to div's and append th in front of each td

html-table, jquery

Solution

This works:

$('.content table').replaceWith(function() {

    var $th = $(this).find('th'); // get headers
    var th = $th.map(function() {
        return $(this).text();
    }).get(); // and their values

    $th.closest('tr').remove(); // then remove them

    var $d = $('<div>', { 'class': 'box' });

    $('tr', this).each(function(i, el) {
        var $div = $('<div>', {'class': 'inner'}).appendTo($d);
        $('td', this).each(function(j, el) {
            var n = j + 1;
            var $row = $('<div>', {
                'class': 'row-' + n
            });
            $row.append(
            $('<span>', {
                'class': 'label-' + n,
                text: th[j]
            }), ' : ', $('<span>', {
                'class': 'data-' + n,
                text: $(this).text()
            })).appendTo($div);
        });
    });

    return $d;
});

demo at http://jsfiddle.net/alnitak/UK395/

Problem

I am trying to convert all tables to divs and add the th html or contents of the th in from of each td that is converted to a div. So my table would look like this: ``` <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> ``` And I want to convert it so it is like this: ``` <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> ``` I found this code that almost works but can figure out how to make it get the th if there are any th's and add them before each td's data span. ``` $('.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>'; }); ``` Any help would be soooo greatly appreciated!!

Original source