innerHTML erzeugt nicht <tr> und <td> richtig

Question

Ich muss eine Tabelle generieren, deren Zeilen durch ein for() generiert werden. Weil in diesen Zeilen Daten von einem Array kommen.

Dies ist mein Code:

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> 

Bis zur Aussage, alles funktioniert, wie ich will. Aber der tr und der td werden nicht erzeugt.

Answer 1

Sie haben es auf einmal zu tun:

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

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