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

如果在$ .each循环中尝试了几种不同的方法来格式化'row'元素而没有任何运气。看起来.attr（）函数在IE中不起作用。

在addClass（）函数上它可以在这里工作：

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

但是，如果我尝试将它应用于$ .each循环中的行，则不起作用：

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

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

编辑：

问题是css / attributes没有应用于我正在创建的s。

自我的定义是：

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

tblResults已经在我的页面上定义了。

Answer 1

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

更新以修复bobince指出的XSS可能性：

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+，它会识别这样的片段，并在进行循环插入时在幕后提供大量优化。

Answer 2

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

您不能使用IE中的onX属性按字符串设置事件处理程序，并且通常不应该从字符串设置内联事件处理程序。最好使用真正的JS函数对象：

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

或者，如果你想出于效率原因重新使用相同的函数对象（而不是形成闭包）：

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

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

除非你绝对肯定需要你的悬停效果在IE6上运行，否则我认为你最好用一个（更简单的）CSS :hover规则来做这件事。 IE6用户不需要漂亮的东西。： - ）

JQuery函数.addClass（）,. attr（）和.find（）在IE7中不起作用，需要解决方法

2 个答案: