Adding table rows using jQuery - IE7 specific problem

Question

Still getting the hang of jQuery, and I'm having a problem adding rows to a table. I got code from this link on stackoverflow, but it's not working on IE7, which sadly is the one browser is HAS to work in.

I THINK the problem is the jQuery selector for the table, but nothing else I've tried has worked. Any ideas?

Some code:

<table id="payments" class="resultsGrid">
    <thead>
        <tr class="header">
            <th style="width: 45px;">Type</th>
            <th style="width: 50px;">Check #</th>
            <th style="width: 50px;">Amount</th>
            <th style="width: 50px;">Date</th>
            <th>Notes</th>
            <th style="width: 48px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

And the JS:

var table = $("#payments > tbody:last");
    table.empty();

    if (demolition.Payments != null) {
        $("#payments").show();

        for (i = 0; i < demolition.Payments.length; i++) {
            table.append("<tr>");
            // blah blah trimmed
            table.append("</tr>");
        }
    }
    else {
        table.append("<tr>");
        table.append("<td colspan=\"6\" style=\"padding: 4px;\">No payments recorded.</td>");
        table.append("</tr>");
    }

Try appending all that text in one line of code, instead of three -- it's possible the opening TR tag is being closed right away, rather than waiting for you to do it. You could also do it by `.push`ing the text onto an array and `.append`ing the `.join`ed array all at once. — Blazemonger, Sep 06 '11 at 18:17

Dennis · Accepted Answer · 2011-09-06T18:24:40.010

Combine them into one call. Your jQuery is closing the tags and adding a row, then adding the cells outside of the row. Even Chrome displays this behavior in jsfiddle

table.append("<tr><td colspan=\"6\" style=\"padding: 4px;\">No payments recorded.</td></tr>"); //This adds a row with its contents contained.

Better yet, concatenate them to a string and add all the rows at once to reduce DOM manipulation overhead. The stringbuffer technique is less useful in modern browsers, but since you are using IE7 it may be faster than the + operator.

var buffer = [];
for (...){
    buffer.push("<tr>");
    buffer.push(cellOne);
    buffer.push(cellTwo);
    buffer.push(cellThree);
    buffer.push("</tr>");
}

table.append(buffer.join('')); //This speeds up string concatenation.

Using the table.append with a prebuilt string of HTML fixed it. Thanks, Dennis. (will accept answer once the site lets me) — zk812, Sep 06 '11 at 18:23

Adding table rows using jQuery - IE7 specific problem

1 Answers1