HTML table creator

by Hifni Nazeer

HTML

<button id="btn">
  click
</button>
<div id="divContent">

</div>

CSS

table {
  border: 1;
  border-spacing: 1;
  border-collapse: collapse;
}

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}

JavaScript

$(document).ready(function() {
  alert("hi");

  $('#btn').click(function() {
    alert("you clicked me");

    var arr = [];

    for (var i = 0; i < 5; i++) {
      var item = {};
      item["a"] = "all is well" + i;
      item["b"] = "boat is sinking " + i;
      item["c"] = "cheshire cat " + i;
      item["d"] = i;
      arr.push(item);
    }
    
    var htmlTable = buildHtmlTable(arr,"t1");
    $('#divContent').html(htmlTable);
  });
});


function buildHtmlTable(data, name) {
  var columns = getColumns(data);
  var columnHtml = getHtmlColumnHeaders(columns);
  var tableStr = '';
  var rowStr = '';

  if (name != null) {
    tableStr = '<table id="' + name + '" class="table table-condensed"><tbody>';
  } else tableStr = '<table class="table table-condensed"><tbody>';

  for (var i = 0; i < data.length; i++) {

    var colStr = '';
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = data[i][columns[colIndex]];

      if (cellValue == null) {
        cellValue = "";
      }

      var num = 0;

      try {
        num = parseFloat(cellValue);
        num = Math.round(num * 100) / 100;
        //console.log(num);
      } catch (e) {
        num = 0;
      }

			//CHeck if Cell is Numeric Type
      if (!isNaN(num)) {
        colStr = colStr + '<td align="right">' + currencyFormat(num) + '</td>';
      } else colStr = colStr + '<td>' + cellValue + '</td>';
    }

    rowStr = rowStr + '<tr>' + colStr + '</tr>';
  }

  tableStr = tableStr + columnHtml + rowStr + '</tbody><tfoot></tfoot></table>';

  return tableStr;
}

function getColumns(data) {
  var columnSet = [];

  for (var i = 0; i < data.length; i++) {
    var rowHash = data[i];
    for (var key in rowHash) {
      columnSet.push(key);
    }
    break;
  }

  return columnSet;
}

function getHtmlColumnHeaders(columns) {
  var columnsHtml = '';

  for (var i = 0; i < columns.length; i++) {
    columnsHtml = columnsHtml + '<th>' + columns[i] + '</th>';
  }

  var...