adding a line
in returned for each results

Question

I am appending data to the screen, but at the end of each I am trying to add a <hr> which produces a line. The issue is, when I add this simple tag, it messes up the structure. I am not sure what is causing this, but I would like to know how to append the tag without stretching out all of the appended elements.

$.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>

Just use `border-bottom:1px solid black` - you can omit the last child with CSS if needs be. — rybo111, Mar 08 '16 at 02:01

score 2 · Answer 1 · edited May 23 '17 at 12:33

2

I'd have a look here Using an <hr> tag with a table

relevant quote from @marcianx

The best way to add a horizontal line between rows is with CSS borders

and I agree.

edited May 23 '17 at 12:33

Community

1
1

answered Mar 08 '16 at 01:57

Eric Phillips

131
6

score 0 · Accepted Answer · edited May 23 '17 at 11:45

You can definitely add a row that has just an <hr> in it. (Although, as other's have said, I would seriously consider using CSS instead; I won't address that here).

Example 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>

However, it looks like there are some other issues with your code. You need to give complete elements (open and close tag) to JQuery's append() function or else it'll automatically close off any element (for more information, see this SO question).

Example JS after cleanup (Here's the 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);
        });

As a side note, please consider using a templating library to construct HTML (Mustache is awesome). This is much more maintainable than building JS / jQuery HTML structures.

adding a line in returned for each results

2 Answers2

adding a line
in returned for each results