为每个结果添加一行 <hr>答案

【问题标题】：adding a line <hr> in returned for each results为每个结果添加一行 <hr>
【发布时间】：2016-06-21 19:36:15
【问题描述】：

我正在将数据附加到屏幕上，但在每个末尾我都试图添加一个<hr>，它会产生一行。问题是，当我添加这个简单的标签时，它会弄乱结构。我不确定是什么原因造成的，但我想知道如何在不拉伸所有附加元素的情况下附加标签。

$.each(results, function() {
  $("#resultsDiv").append('<tr>');
  $("#resultsDiv").append('<td width=11.1% align="left" valign="center">' + this.group1 + '</td>');
  $("#resultsDiv").append('<td width=11.1% align="left" valign="center">' + this.group2 + '</td>');
  $("#resultsDiv").append('<td width=11.1% align="left" valign="center"><img id="Img" src="ghost.png"></td>');
  $("#resultsDiv").append('<hr>');
  $("#resultsDiv").append('</tr>');
});

&lt;div id="resultsDiv"&gt;&lt;/div&gt;

【问题讨论】：

只需使用border-bottom:1px solid black - 如果需要，您可以使用 CSS 省略最后一个子元素。

标签： html css

【解决方案1】：

我想看看这里Using an <hr> tag with a table

来自@marcianx 的相关引用

在行之间添加水平线的最佳方法是使用 CSS 边框

我同意。

【讨论】：

【解决方案2】：

您绝对可以添加一个只有<hr> 的行。（虽然，正如其他人所说，我会认真考虑改用 CSS；我不会在这里解决这个问题。

示例 HTML：

<table>
    <tbody id="results">
    <tr>
        <td>A</td>
        <td>Ipsum</td>
        <td><img src="ghost.png"/></td>
    </tr>
    <tr>
        <td colspan="999"><hr></td>
    </tr>
    </tbody>
</table>

但是，您的代码似乎还有其他一些问题。您需要为 JQuery 的 append() 函数提供完整的元素（打开和关闭标记），否则它将自动关闭任何元素（有关更多信息，请参阅 this SO question）。

清理后的示例 JS（这里是 fiddle）：

$.each(results, function () {
            var $tr = $('<tr>')
                .append('<td width=11.1% align="left" valign="center">' + this.group1 + '</td>')
                .append('<td width=11.1% align="left" valign="center">' + this.group2 + '</td>')
                .append('<td width=11.1% align="left" valign="center"><img  src="ghost.png"></td>')

            var $trSep = $('<tr>')
                .append('<td colspan="99"><hr></td>');

            $dest.append($tr)
                .append($trSep);
        });

附带说明，请考虑使用模板库来构建 HTML（Mustache 很棒）。这比构建 JS / jQuery HTML 结构更易于维护。

【讨论】：