在爲每個結果返回的行中添加一行<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