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

我正在構建一個表並嘗試添加一些CSS以及一些屬性。我似乎無法找到任何IE7的解決方法。JQuery函數.addClass（），.attr（）和.find（）在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");

如果試圖在$。每個循環多種不同的方法來格式化「行」元素沒有任何運氣。看起來，.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只是我的網頁上已經定義。

來源

2010-02-05 Collin Estes

每個對document.createelement的調用在javascript中都很慢 - 你可以更好地製作一個行html的文本字符串，然後添加它。 – Hogan 2010-02-05 18:23:13

「它不起作用」是指：它沒有找到TR或它不添加類？（選擇器或addClass（）問題？ – pixeline 2010-02-05 18:24:29

哪裏是自我def - 這可能會使問題更清楚。 – Hogan 2010-02-05 18:27:02

試試這個替代方案，如果您有任何問題發表評論......沒有你的設置，我不能完全測試：

更新修復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+，它可以識別這樣的片段，並在循環插入時在幕後提供大量的優化。

來源

2010-02-05 18:40:22

感謝這工作正常。 – 2010-02-05 18:50:31

您剛剛引入了一個潛在的跨站點腳本安全漏洞，並使用HTML字符串吊銷。如果'description'中有'<或'＆'字符，你就會遇到問題。 'createTextNode'方法和jQuery'text（）'避免了這個問題。 – bobince 2010-02-05 20:26:22

@bobince - 好點:)我更新了答案，以防其他人在以後遇到此問題。 – 2010-02-05 21:45:31

$(...).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用戶不需要漂亮的東西。 :-)

來源

2010-02-05 20:29:32 bobince

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

回答

相關問題