Question

我需要生成一个表，其tbody的行是通过for（）生成的。因为在这行中将是来自数组的数据。

这是我的代码：

JS：

alunos = JSON.parse(req.responseText);
                document.getElementById("tableModal").innerHTML =
                    "<div class='table-responsive'>"+
                    "<table class='table table-striped table-hover table-condensed table-order'>"+
                    "<thead>"+
                    "<tr>"+
                    "<th>Aluno</th>"+
                    "<th>Celular</th>"+
                    "<th>Turma</th>"+
                    "<th>Status</th>"+
                    "</tr>"+
                    "</thead>"
                    "<tbody>";
                for(i = 0; i<alunos.length;i++) {
                    document.getElementById("tableModal").innerHTML +=
                    "<tr>" +
                    "<td>" + alunos[i].nome + "</td>" +
                    "<td>" + alunos[i].celular + "</td>" +
                    "<td>" + turma + "</td>" +
                    "<td>Status</td>" +
                    "</tr>";

                }
                document.getElementById("tableModal").innerHTML += "</tbody></table></div>";

HTML：

<div class="modal fade" id="modalMsg" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="tituloModal"></h4>
            </div>
            <div class="modal-body">
                <div id="tableModal"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
            </div>
        </div>

    </div>
</div>

直到for语句，一切都按我的意愿运作。但是没有生成tr和td。

Answer 1

你必须一次性完成：

＆＃13;

var req = {
  responseText : '[{"nome":"name","celular":"1233456"},{"nome":"name","celular":"1233456"}]'
}
var turma = "x";
alunos = JSON.parse(req.responseText);
var html= "<div class='table-responsive'>" +
  "<table class='table table-striped table-hover table-condensed table-order'>" +
  "<thead>" +
  "<tr>" +
  "<th>Aluno</th>" +
  "<th>Celular</th>" +
  "<th>Turma</th>" +
  "<th>Status</th>" +
  "</tr>" +
  "</thead>"
"<tbody>";
for (i = 0; i < alunos.length; i++) {
  html +=
    "<tr>" +
    "<td>" + alunos[i].nome + "</td>" +
    "<td>" + alunos[i].celular + "</td>" +
    "<td>" + turma + "</td>" +
    "<td>Status</td>" +
    "</tr>";

}
document.getElementById("tableModal").innerHTML += html+"</tbody></table></div>";

＆＃13;

<div class="modal fade" id="modalMsg" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="tituloModal"></h4>
      </div>
      <div class="modal-body">
        <div id="tableModal"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
      </div>
    </div>

  </div>
</div>

＆＃13;

innerHTML并没有正确生成

1 个答案: