JSON to html STYLED table

Question

We can convert a set of JSON data to html table by below code:

$.each(data, function(key, val) {
    var tr=$('<tr></tr>');
    $.each(val, function(k, v){
        $('<td>'+v+'</td>').appendTo(tr);
    });
    tr.appendTo('#display');
});

The html table is:

<table border='1' id="display">

    <thead>
            <tr>
                <th>firstcol</th>
                <th>loc</th>
                <th>lastA</th>
                <th>mTime</th>
                <th>nTime</th>
                <th>Age</th>
                <th>ction</th>
            </tr>
        </thead>        
</table>

A working example at: http://jsfiddle.net/AHv6c/ (source jquery code to display json response to a html table using append)

My problem is when some of the rows columns could have their own style class.

So I want to change some of the the table <th> to <th class='sampleStyle'> . Can you please let me know how should I change the java script to read the corresponding class from th and assign it to relevant columns (s).

Then the generated table should be something like:

<tr>
     <td>56036</td>
     <td class="sampleStyle">Deli</td>
     ....

By the way do you know better approach?

where do you get the style classes? are they saved in the data array? — Mihai Matei, Apr 27 '14 at 14:01

score 1 · Accepted Answer · answered Apr 27 '14 at 15:57

You may try something like http://www.jqversion.com/#!/Mdi8Kla

$.each(data, function(key, val) {
    var tr    = $('<tr></tr>'),
        index = 0;
    $.each(val, function(k, v){
        $('<td>'+v+'</td>').addClass(
          $('th:eq(' + index + ')').attr('class')
        ).appendTo(tr);
        index++;
    });
    tr.appendTo('#display');
});

score 0 · Answer 2 · answered Apr 27 '14 at 14:06

0

$("td:eq(0)", tr).addClass("sampleStyle");

before appending tr

answered Apr 27 '14 at 14:06

Artem Gorlachev

597
4
9

I want to get the class from the not add a class to first td or so – Alireza Fattahi Apr 27 '14 at 15:36

JSON to html STYLED table

2 Answers2