jquery - 动态向表中添加行时引导 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> tag 是另一个开放标签。规范化的 HTML 正在创建一个空行(使用您的开发控制台检查 fiddle 的输出窗口)。这:

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

工作得很好。

更新 fiddle :https://jsfiddle.net/mtropkdx/1/