bootstrap css issue при динамическом добавлении строки в таблицу

Question

У меня есть простая таблица, использующая bootstrap css. Таблица содержит следующие классы

<table id="data-table" style="word-wrap: break-word" class="table table-condensed table-striped"> 

Это прекрасно работает, когда я добавить строки непосредственно через HTML файл, но когда я пытаюсь использовать JavaScript, чтобы добавить новую строку, полосатая CSS не работает должным образом.

var table = $('#data-table'); 
table.children('tbody').append("<tr><td>User3</td><td>Real name 3</td><td>undefined</td><tr>"); 

JSFiddle пример: https://jsfiddle.net/mtropkdx/

Есть ли CSS обновления, которые нужно выполнить, чтобы получить Css работу?

Редактировать: Когда я insepct DOM, я могу видеть, что между вставленными строками пусто, я думаю, поэтому я не могу видеть полосатые. Но почему они там?

Answer 1

Ваш конец <tr> тег - еще один открытый тег. Нормализованный HTML создает пустую строку (используйте консоль dev, чтобы проверить окно вывода скрипта). Это:

table.children('tbody').append("<tr><td>User3</td><td>Real name 3</td><td>undefined</td></tr>") 

работает просто отлично.

ОБНОВЛЕНО скрипку: https://jsfiddle.net/mtropkdx/1/