dynamic sales table

by karin

HTML

<table></table>

CSS

table {
    border:thin solid #ddd;
    width:200px;
    height:100px;
}

JavaScript

var data = [2017, 2018, 2019, 2020];
var endyear = 2020;
var columns = data.length + 2; //add first and the last column

$('<thead><tr></tr></thead>').appendTo('table');
$('<tbody></tbody>').appendTo('table');
for (var j = 0; j < 4; j++) {
    $('<tr data-row="' + j + '"></tr>').appendTo('table tbody');

    for (var i = 0; i < columns; i++) {
        //add header row
        if (j === 0) {
            //add first cell for first column
            if (i === 0) {
                $('<td data-cell="' + j + i + '">type</td>').appendTo('thead tr');
            }
            //add last cell for the last column
            else if (i === columns - 1) {
                $('<td data-cell="' + j + i + '">sum</td>').appendTo('thead tr');
            }
            //add all year cells for the header row
            else {
                $('<td data-cell="' + j + i + '">' + data[i - 1] + '</td>').appendTo('thead tr');
            }
        }
        //add first column except for header row
        if (j !== 0) {
            if (i === 0) {
                //add first column
                if (j === 1) {
                    $('<td data-cell="' + j + i + '">median</td>').appendTo('[data-row="' + j + '"]');
                } else if (j === 2) {
                    $('<td data-cell="' + j + i + '">3/12</td>').appendTo('[data-row="' + j + '"]');
                } else if (j === 3) {
                    $('<td data-cell="' + j + i + '">12/12</td>').appendTo('[data-row="' + j + '"]');
                }

            } else if (i !== 0 && i < columns) {
                //add data columns
                $('<td data-cell="' + j + i + '">' + j + i + '</td>').appendTo('[data-row="' + j + '"]');
            } else if (i == columns) {
                //add last column
                $('<td data-cell="' + j + i + '">sum</td>').appendTo('[data-row="' + j + '"]');
            }
        }



    } //end add columns

} //end add rows