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 .pushing the text onto an array and .appending the .joined array all at once. — Blazemonger
– Blazemonger, Commented Sep 6, 2011 at 18:17

Dennis · Accepted Answer · 2011-09-06 18:24:40Z

2

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.

edited Sep 6, 2011 at 18:24

answered Sep 6, 2011 at 18:14

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zk812 Over a year ago

Using the table.append with a prebuilt string of HTML fixed it. Thanks, Dennis. (will accept answer once the site lets me)

Collectives™ on Stack Overflow

Adding table rows using jQuery - IE7 specific problem

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related