在为每个结果返回的行中添加一行<hr>

我正在将数据附加到屏幕上，但在每个行结束时，我试图添加一个产生行的<hr>。问题是，当我添加这个简单的标签时，它会混淆结构。我不确定是什么导致了这一点，但我想知道如何追加标签而不需要扩展所有附加元素。在为每个结果返回的行中添加一行<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>'); 
 
});

<div id="resultsDiv"></div>

来源

2016-03-08 vzupo

只需使用'border-bottom：1px纯黑色' - 如果需要，您可以使用CSS省略最后一个孩子。 – rybo111

你绝对可以添加一个只有<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结构更可维护。

来源

2016-03-08 02:24:44 souldzin

我不得不在这里看看Using an <hr> tag with a table

在为每个结果返回的行中添加一行<hr>

回答

相关问题