table cells

by karin

HTML

<div class="moreless">toggle</div>
<table style="width:80%"></table>

CSS

table tr td{
    background:#ddd;
    border:thin solid #555;
}
table tr td:nth-child(1),
table tr td:nth-child(2),
table tr td:nth-child(3),
table tr td:nth-child(4),
table tr td:nth-child(5){
    background:red;
}

JavaScript

var data = [2017, 2018, 2019, 2020];
var endyear = 2020;
var columns=data.length+2;


for (var j = 0; j < 4; j++) {
      $('<tr data-row="'+j+'"></tr>').appendTo('table');
  for (var i = 0; i <= 15; i++) {
        $('<td data-cell="'+j + i+'">'+j+i+'</td>').appendTo('[data-row="'+j+'"]');
    } //end add columns

} //end add rows

var totalColumns=$("table").find("tr:first td").length;
var hiddenCols=totalColumns-11;
alert(totalColumns);

$('.moreless').on('click',function(){
for(var k=0;k<=hiddenCols;k++){
    $('table tr td:nth-child('+k+')').toggle(1000);
}
});