Problems with disorganized table. Javascript HTML5

Question

I have a problem in my project with a table. My project has a table which is loaded by Javascript. But when the elements of this page are loaded, the information of the table was disorganized.

In my project, when i load the table, the first row is in the bottom, but the others rows are correct.

This is the HTML5 Code:

<table id="ranking" border="1">

        <thead>

          <tr>
             <th scope="col">Posicion</th>
             <th scope="col">Nombre</th>
             <th scope="col">Alianza</th>
             <th scope="col">Puntos</th>
             <th scope="col">Pueblos</th>
           </tr>
        </thead>



      </table>

This page is loaded by JavaScript which it use this code:

    function cargaRankin(){

    for (x = 1; x < 10; x++)
{

  var capa = document.getElementById("ranking");
  var tfoot = document.createElement("tfoot");
  var tr = document.createElement("tr");
  var tdpos = document.createElement("td");
  var tdnom = document.createElement("td");
  var tdali = document.createElement("td");
  var tdpun = document.createElement("td");
  var tdpue = document.createElement("td");

  tdpos.innerHTML = x;
  tr.appendChild(tdpos);

  tdnom.innerHTML = "nombre";
  tr.appendChild(tdnom);

  tdali.innerHTML = "alianza";
  tr.appendChild(tdali);
  tdpun.innerHTML = "puntos";
  tr.appendChild(tdpun);
  tdpue.innerHTML = "pueblos";
  tr.appendChild(tdpue);

  tfoot.appendChild(tr);
  capa.appendChild(tfoot);

}

}

Why this happens? What I can do to fix that?

Thank you!

Answer 1

You're also attaching <tfoot> during every iteration. A table should only have a single <tfoot></tfoot> element. I assuming that your table is <table id="ranking"></table> right?

var capa = document.getElementById("ranking");

for (x = 1; x < 10; x++)
{
    var tr = document.createElement("tr");
    var tdpos = document.createElement("td");
    var tdnom = document.createElement("td");
    var tdali = document.createElement("td");
    var tdpun = document.createElement("td");
    var tdpue = document.createElement("td");

    tdpos.innerHTML = x;
    tr.appendChild(tdpos);

    tdnom.innerHTML = "nombre";
    tr.appendChild(tdnom);

    tdali.innerHTML = "alianza";
    tr.appendChild(tdali);

    tdpun.innerHTML = "puntos";
    tr.appendChild(tdpun);

    tdpue.innerHTML = "pueblos";
    tr.appendChild(tdpue);

    capa.appendChild(tr);
}

EDIT:

And in the future, it's really helpful when you ask questions like this to also include a JSFiddle