JQuery functions .addClass(), .attr() and .find() not working in IE7, need workaround

Question

I'm building a table and trying to add some CSS as well as some attributes. I can't seem to find any workarounds for IE7.

Here is what I'm doing:

$.each(eat,function() {

//Builds tablerows
var row = document.createElement("tr");
var cellReportId = document.createElement("td");
cellReportId.appendChild(document.createTextNode(this.reportId));
var cellDescription = document.createElement("td");
cellDescription.appendChild(document.createTextNode(this.description));
var cellDrawingNumber = document.createElement("td");
cellDrawingNumber.appendChild(document.createTextNode(this.drawingNumber));

row.appendChild(cellReportId);
row.appendChild(cellDescription);
row.appendChild(cellDrawingNumber);


$(self.tblResults[0]).append(row);
})


$(self.tblResults[0]).find('tr').addClass("DynamicTableTR"); 
$(self.tblResults[0]).find('tr:not(:first)').attr("onmouseover", "this.style.background='#EDEED5'");
$(self.tblResults[0]).find('tr:not(:first)').attr("onmouseout", "this.style.background='white'");
$(self.tblResults[0]).find('tr:first').addClass("DynamicTableHeaderRow");
$(self.tblResults[0]).addClass("DynamicTable");

}

The part at the bottom doesn't work in IE:

$(self.tblResults[0]).find('tr').addClass("DynamicTableTR"); 
$(self.tblResults[0]).find('tr:not(:first)').attr("onmouseover", "this.style.background='#EDEED5'");
$(self.tblResults[0]).find('tr:not(:first)').attr("onmouseout", "this.style.background='white'");
$(self.tblResults[0]).find('tr:first').addClass("DynamicTableHeaderRow");

If tried several different approaches in the $.each loop to format the 'row' element without any luck. The .attr() function will not work in IE either it seems.

On the addClass() function it does work here:

$(self.tblResults[0]).addClass("DynamicTable");

However it does not work if I try to apply it to the row in $.each loop like this:

$(row).addClass("DynamicTableTR");

I can't seem to find any workaround for IE.

EDIT:

The issue is the css/attributes are not getting applied to the s that I'm creating.

And the defintion of self is:

var self = this;    //Capture the current self, outside of the $.each loop 

tblResults is just a already defined on my page.

Answer 1

Try this alternative, comment if you have any issues...without your setup I can't test completely:

Updated to fix the XSS possibility as bobince pointed out:

var tbl = $(self.tblResults[0]);
$.each(eat,function() {
  $("<tr class='DynamicTableTR' />")
    .append($("<td></td>").text(this.reportId))
    .append($("<td></td>").text(this.description))
    .append($("<td></td>").text(this.drawingNumber))
   .appendTo(tbl);
});

// This next .hover() could be replaced with a CSS rule:
// .DynamicTableTR:hover { background: #EDEED5; }
// Won't work in IE 6 though, maybe some other older browsers

tbl.find('tr:not(:first)').hover(function() {
  $(this).css("background","#EDEED5");
 }, function() { 
  $(this).css("background", "white");
 });
tbl.addClass("DynamicTable").find('tr:first').addClass("DynamicTableHeaderRow");

If you're using jQuery 1.4+, it recognizes snippets like this and offers a great deal of optimization behind the scenes when doing looping inserts.

Answer 2

$(...).attr("onmouseover", "this.style.background='#EDEED5'");

You can't set event handlers by string using onX attributes in IE, and you shouldn't generally set inline event handlers from string anyway. Better to use a real JS function object:

$(...).mouseover(function() { this.style.background='#EDEED5' });

or, if you want to re-use the same function object (and not form a closure) for efficiency reasons:

function row_onmouseover() {
    this.style.background= '#EDEED5';
}
...

$(...).mouseover(row_onmouseover);

There again, unless you absolutely definitely need your hover effect to work on IE6, I think you're better off doing it with a (much simpler) CSS :hover rule. IE6 users don't need pretty things. :-)