javascript - JQuery 函数 .addClass()、.attr() 和 .find() 在 IE7 中不起作用，需要解决方法

Question

我正在构建一个表格并尝试添加一些 CSS 和一些属性。我似乎找不到 IE7 的任何解决方法。

这是我正在做的:

$.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");

}

底部的部分在 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 在 $.each 循环中尝试了几种不同的方法来格式化 'row' 元素，但都没有成功。 .attr() 函数似乎在 IE 中也不起作用。

在 addClass() 函数上它确实在这里起作用:

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

但是，如果我尝试像这样将它应用于 $.each 循环中的行，它就不起作用:

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

我似乎无法为 IE 找到任何解决方法。

编辑:

问题是 css/属性没有应用到我正在创建的 s。

self的定义是:

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

tblResults 只是一个已经在我的页面上定义的。

Answer 1

尝试这个替代方案，如果您有任何问题请评论...没有您的设置我无法完全测试:

已更新以将 XSS 可能性修复为 bobince指出:

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

如果您使用的是 jQuery 1.4+，它会识别这样的片段，并在进行循环插入时在幕后提供大量优化。