​

​

$(document).ready(function () {

  console.log("starting");

  var workarea=$("#workarea");

  var table=$("<table class='pyramid'/>");

  var num=1;

  for (var i = 1; i<=4;i++) {

    var row=$("<tr/>");

    table.append(row);

    for (var j=1;j<=7;j++) {

      var column=$("<td/>");

      if (j>4-i && j<=7-(4-i)) {

        column.html(num);

        column.addClass("occupied");

        num++;

      }

      row.append(column);

    }

  }

  for (var i = 3; i>=1;i--) {

     row=$("<tr/>");

    table.append(row);

    for (var j=1;j<=7;j++) {

       column=$("<td/>");

      if (j>4-i && j<=7-(4-i)) {

        column.html(num);

        column.addClass("occupied");

        num++;

      }

      row.append(column);

    }

  }  

  console.log("table");

  workarea.append(table);

})