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

我正在构建一个表，并尝试添加一些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");

但是，如果我尝试将其应用于$中的行，则它不起作用。每个循环如下：

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

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

编辑：

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

自我的定义是：

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

---

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

尝试此选项，如果您有任何问题，请发表评论…没有您的设置，我无法完全测试：

已更新以修复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");

var tbl=$（self.tblResults[0]）；
$.each（eat，function（）{
$("")
.append（$（“”）.text（this.reportId））
.append（$（“”）.text（this.description））
.append（$（“”）.text（this.drawingNumber））
.附件（待定）；
});
//此next.hover（）可以替换为CSS规则：
//.DynamicTableTR:hover{background:#EDEED5；}
//但在IE6中不起作用，可能是其他一些较旧的浏览器
tbl.find（'tr:not（：first'））.hover（函数（）{
$（this.css（“背景”，“EDEED5”）；
}，函数（）{
$（this.css（“背景”、“白色”）；
});
tbl.addClass（“DynamicTable”）.find（'tr:first'）.addClass（“DynamicTableHeaderRow”）；

---

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

尝试此替代方法，如果您有任何问题，请发表评论…没有设置，我无法完全测试：

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

已更新以修复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");

var tbl=$（self.tblResults[0]）；
$.each（eat，function（）{
$("")
.append（$（“”）.text（this.reportId））
.append（$（“”）.text（this.description））
.append（$（“”）.text（this.drawingNumber））
.附件（待定）；
});
//此next.hover（）可以替换为CSS规则：
//.DynamicTableTR:hover{background:#EDEED5；}
//但在IE6中不起作用，可能是其他一些较旧的浏览器
tbl.find（'tr:not（：first'））.hover（函数（）{
$（this.css（“背景”，“EDEED5”）；
}，函数（）{
$（this.css（“背景”、“白色”）；
});
tbl.addClass（“DynamicTable”）.find（'tr:first'）.addClass（“DynamicTableHeaderRow”）；

如果您使用的是jQuery1.4+，它可以识别这样的代码片段，并在执行循环插入时在幕后提供大量优化

$(...).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用户不需要漂亮的东西。：-）

您不能在IE中使用

onX

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

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

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

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

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

---

同样，除非你绝对需要你的悬停效果才能在IE6上工作，否则我认为你最好使用一个（更简单的）CSS

：hover

规则。IE6用户不需要漂亮的东西。：-）

javascript中对document.createelement的每次调用都非常慢——最好是生成一个html行的文本字符串，然后添加该字符串。“它不工作”意味着：它找不到TR或它不添加类？（选择器或addClass（）问题？self的def在哪里？这可能会让问题更清楚。我编辑了这篇文章来回答这两个问题。另外，Hogan，我只是将其作为字符串添加，但我认为作为createElement添加会允许我将一些属性绑定到它们，这是我需要做的。每次调用document.createElement在javascript中都非常慢--您最好创建一个html行的文本字符串，然后添加它。“它不工作”意味着：它找不到TR或它不添加类？（选择器或addClass（）问题？self的def在哪里？这可能会让问题变得更清楚。我编辑了这篇文章来回答这两个问题。另外，Hogan我只是将添加为字符串，但我认为作为createElement来添加，这将允许我将一些属性绑定到它们，这是我需要做的。您刚刚引入了一种潜在的跨站点脚本安全性如果

description

有

@bobince-Good point:）我更新了答案，以防以后有人遇到这个问题。你刚刚在HTML字符串抛出中引入了一个潜在的跨站点脚本安全漏洞。如果
description
有
@bobince-Good point:）我更新了答案，以防以后有人遇到这个问题。