popular tabela em javascript puro

by Gabriel Rodrigues

HTML

<table id="minhaTabela">
  <thead>
    <tr>
      <th data-nome="nome">Nome</th>
      <th data-nome="valor" data-tipo="moeda">Valor</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JavaScript

var numeroParaMoeda = function(n, c, d, t) {
  c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
  return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
var tabela = document.getElementById('minhaTabela');

var dados = [{
  nome: "Budwaiser",
  valor: 5.00
}, {
  nome: "Heineken",
  valor: 4.50
}, {
  nome: "Desperados",
  valor: 5.50
}];

popularTabela(tabela, dados);

function popularTabela(tabela, dados) {
  var nomes = [];
  var tipos = [];
  var th = tabela.tHead.getElementsByTagName('th');

  for (var i = 0; i < th.length; i++) {
    nomes.push(th[i].getAttribute("data-nome"));
    tipos.push(th[i].getAttribute("data-tipo") || "nenhum");
  }

  var tbody = "";
  for (var i in dados) {
    tbody += "<tr>" + td(dados[i]) + "</tr>";
  }

  function td(val) {
    var td = "";
    for (var i = 0; i < nomes.length; i++) {
      switch (tipos[i]) {
        case 'nenhum':
          break;
        case 'moeda': // mascara de moeda
          val[nomes[i]] = numeroParaMoeda(val[nomes[i]]);
          break;
        case 'data':
          // Formate a data
          break;
        default:
          console.warn("Ação inválida.");
      }
      td += "<td>" + val[nomes[i]] + "</td>";
    }
    return td;
  }

  tabela.tBodies[0].innerHTML = tbody;
}