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>");
    }

Answer 1

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.