groups

/*http://stackoverflow.com/questions/23345242/generate-html-table-row-containing-a-value-and-its-sibling-and-parent-values*/

by guest271314

HTML

<table>
    <th>Groups</th>
    <tr class="group-1">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="group-1">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="group-2">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="group-2">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

JavaScript

$(document).ready(function () {
   var Groups = {
        "groups": [{
            "group": {
                "id": 1,
                "description" : "clicks",
                    "all": [{
                    "segment": 10
                }, {
                    "segment": 20
                }],
                    "cars": [{
                    "segment": 30
                }, {
                    "segment": 40
                }]
            }
        }, {
            "group": {
                "id": 2,
                "description" : "clicks",
                    "all": [{
                    "segment": 50
                }, {
                    "segment": 60
                }],
                    "cars": [{
                    "segment": 70
                }, {
                    "segment": 80
                }]
            }
        }]
    };
    $.each(Groups, function (key, value) {
        var g1all = $("tr.group-1:eq(0) > td");
        var g1cars = $("tr.group-1:eq(1) > td");
        var g2all = $("tr.group-2:eq(0) > td");
        var g2cars = $("tr.group-2:eq(1) > td");
        $(g1all).eq(0).html("Group: " + value[0].group.id);
        $(g1all).eq(1).html("Vertical: " + ("all" in value[0].group ? "All" : "error") +" Measure: "+ value[0].group.description);
        $(g1all).eq(2).html("Segment 1:  " + value[0].group.all[0].segment);
        $(g1all).eq(3).html(" Segment 2: " + value[0].group.all[1].segment);
        $(g1cars).eq(0).html("Group: " + value[0].group.id);
        $(g1cars).eq(1).html("Vertical: " + ("cars" in value[0].group ? "Cars" : "error") +" Measure: "+ value[0].group.description);
        $(g1cars).eq(2).html("Segment 1:  " + value[0].group.cars[0].segment);
        $(g1cars).eq(3).html(" Segment 2: " + value[0].group.cars[1].segment);

        $(g2all).eq(0).html("Group: " + value[1].group.id);
        $(g2all).eq(1).html("Vertical: " + ("all" in value[1].group ? "All" : "error")  +" Measure: "+ value[1].group.description);
   ...