动态添加行到表时引导css问题

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正常工作？

编辑：当我看到DOM时，我可以看到插入的行之间有空，我猜这就是为什么我看不到条纹的行。但为什么他们在那里？

Answer 1

您的结尾<tr>标记是另一个开放标记。规范化的HTML正在创建一个空行（使用您的开发控制台来检查小提琴的输出窗口）。这样：

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

工作正常。

更新了小提琴：https://jsfiddle.net/mtropkdx/1/