javascript - 表格杂乱的问题。 JavaScript HTML5

Question

我的项目中的表格出现问题。我的项目有一个由 Javascript 加载的表。但是当这个页面的元素被加载时，表格的信息却变得杂乱无章。

在我的项目中，当我加载表格时，第一行位于底部，但其他行是正确的。

这是 HTML5 代码:

<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>

此页面由 JavaScript 加载，它使用以下代码:

    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);

}

}

为什么会发生这种情况？我可以做什么来解决这个问题？

谢谢!

Answer 1

您还附加 <tfoot>在每次迭代期间。一个表应该只有一个 <tfoot></tfoot>元素。我假设你的 table 是 <table id="ranking"></table>对吗？

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);
}

编辑:

将来，当您提出这样的问题时，如果还包含JSFiddle，这真的很有帮助。