动态向表添加行时引导 CSS 问题

Question

我有一个简单的表格，使用引导 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/