Заполнение строк таблицы с помощью метода JQuery .html

Question

В таблице

<table class="table table-striped table-hover universal" style="margin-bottom: 0px;"> 

     <tbody> 
      <span id="appointment_info"> 
       <tr> 
       <td>loading...</td> 
       </tr> 
      </span> 
      <tr> 
       <td>12:30 pm</td> 
       <td>Jenny Harris</td> 
       <td>Exam Room 1</td> 
      </tr> 
     </tbody> 
    </table> 

Я замена span id="appointment_info" использованием jQuery «ы .html() метод.

Как ниже.

var html_str = ""; 
var apmts_len = apmts.length > 5 ? 5 : apmts.length; 

for (var i = 0; i < apmts_len; ++i) { 
    html_str += "<tr> "; 
    var info = apmts[i]; 
    for (var j = 0; j < 3; ++j) { 
     html_str = html_str + "<td>" + info[j] + "</td> "; 
    } 
    html_str += "</tr> "; 

console.log (html_str); }

Однако это не удалось. Он печатает все подряд в одном столбце в уродливом формате.

Сформированный html_str выглядит <tr> <td>09:00 AM</td> <td>Richard Schwarm</td> <td>7</td> </tr>

Как я могу это исправить?

Answer 1

Ваш HTML недействителен ... tbody не может иметь span в качестве своего ребенка, нет необходимости использовать span вместо этого вы можете использовать replaceWith как

var apmts = [ 
 
    [1.1, 1.2, 1.3], 
 
    [2.1, 2.2, 2.3], 
 
    [3.1, 3.2, 3.3] 
 
] 
 

 
var html_str = ""; 
 
var apmts_len = apmts.length > 5 ? 5 : apmts.length; 
 

 
for (var i = 0; i < apmts_len; ++i) { 
 
    html_str += "<tr> "; 
 
    var info = apmts[i]; 
 
    for (var j = 0; j < 3; ++j) { 
 
    html_str = html_str + "<td>" + info[j] + "</td> "; 
 
    } 
 
    html_str += "</tr> "; 
 
} 
 

 
$('#appointment_info').replaceWith(html_str)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="table table-striped table-hover universal" style="margin-bottom: 0px;"> 
 
    <tbody> 
 
    <tr id="appointment_info"> 
 
     <td>loading...</td> 
 
    </tr> 
 
    <tr> 
 
     <td>12:30 pm</td> 
 
     <td>Jenny Harris</td> 
 
     <td>Exam Room 1</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Другой вариант заключается в использовании отдельного тела для хранения динамического содержимого и присвоения id этому tbody и установки его содержимого с использованием .html()

var apmts = [ 
 
    [1.1, 1.2, 1.3], 
 
    [2.1, 2.2, 2.3], 
 
    [3.1, 3.2, 3.3] 
 
] 
 

 
var html_str = ""; 
 
var apmts_len = apmts.length > 5 ? 5 : apmts.length; 
 

 
for (var i = 0; i < apmts_len; ++i) { 
 
    html_str += "<tr> "; 
 
    var info = apmts[i]; 
 
    for (var j = 0; j < 3; ++j) { 
 
    html_str = html_str + "<td>" + info[j] + "</td> "; 
 
    } 
 
    html_str += "</tr> "; 
 
} 
 

 
$('#appointment_info').html(html_str)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="table table-striped table-hover universal" style="margin-bottom: 0px;"> 
 
    <tbody id="appointment_info"> 
 
    <tr> 
 
     <td>loading...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>12:30 pm</td> 
 
     <td>Jenny Harris</td> 
 
     <td>Exam Room 1</td> 
 
    </tr> 
 
    </tbody> 
 
</table>