IE7 and jQuery .html / .empty / .css not firing

I have a page using a bunch of tables that are generated by a .NET repeater on page_load. These tables can have one of two classes: fileExists or fileDoesNotExist. On document.ready, I have the following:

$document.ready(function () {
    $('.fileDoesNotExist').each(function () {
        $(this).html("<h3>FILE #" + $(this).attr('id').replace('T', '') + ":</h3><p><a href=\"/cp/media-upload.aspx?seq=" + $(this).attr('id').replace('T', '') + "\">click here to upload an MP3 or video</a></p>");
        $(this).css('border', 'none');
    });
});

Which should affect this bit of HTML (there are more elements involved, but this is the basic gist):

<table class="fileDoesNotExist" style="width: 100%;margin-top: 1em;" id="T1">
        <tr>
            <th colspan="3">FILE 1</th>
        </tr>
        <tr>
        <td>Media Title:</td>
            <td colspan="2">
                <input name="txtTitle" type="text" maxlength="255" size="50" id="txtTitle" />
            </td>
        </tr>
</table>

This code fires fine in Chrome, Firefox, IE8 and IE9. When trying to view the page in IE7, it does all of nothing. I can replicate it in IE9 using IE7 standards for the document mode, and when trying to run the script directly in the console, it does all of nothing and returns no helpful error message.

The .each is definitely properly firing (I replaced the $(this).html with alert($(this).attr('id')); and that spit out the IDs of the tables with the fileDoesNotExist class) but it seems that the html/css replacements just aren't taking.

Is there something funky with IE7 (besides, you know, it being IE7) that I'm missing here? I looked through the suggested questions listed w/ my topic, but nothing seemed to touch upon .html or .css not firing at all.

回答1:

It appears that innerHTML cannot be safely used in IE7 when being applied to Table or TBody elements. here are a couple of references.

InnerHTML in IE7 problems

jQuery .html() not displaying any data in ie7, but ie8 works

hope that helps, both give workarrounds

Edit

Since your code replaces the contents of the Table element with plain html (no tr/td tags) why not put your tables in a containing div and apply the fileExists / fileDoesNotExist classes to that div instead.

JSFiddle with outer div

回答2:

Per our discussion in the comments, you should not start an ID with a number.