2010-05-10 89 views
1

我的問題是獲取onMouseover,onMouseout,onMousedown,onClick表格行。我爲此調用javascript用戶定義的函數。HTML + javascript鼠標懸停,mouseout,onclick不能在Firefox中工作

onMouseover ---背景顏色應該改變。 onMouseout ---重置爲原始顏色 onClick ---應設置第一列複選框/單選按鈕並且背景顏色應該改變 onMousedown ---背景顏色應該改變。

我的HTML代碼: - <tr onMouseOver="hover(this)" onMouseOut="hover_out(this)" onMouseDown="get_first_state(this)" onClick="checkit(this)" >

和JavaScript中的方法有: -

VAR first_state = FALSE;

var oldcol ='#ffffff'; var oldcol_cellarray = new Array();

功能懸停(元件){

if (! element) element = this; 
while (element.tagName != 'TR') { 
    element = element.parentNode; 
} 

if (element.style.fontWeight != 'bold') { 
    for (var i = 0; i<element.cells.length; i++) { 
     if (element.cells[i].className != "no_hover") { 
      oldcol_cellarray[i] = element.cells[i].style.backgroundColor; 
      element.cells[i].style.backgroundColor='#e6f6f6'; 

     } 
    } 
} 

}

// -------------------------- -------------------------------------------------- -------------------

功能hover_out(元件){

if (! element) element = this; 
while (element.tagName != 'TR') { 
    element = element.parentNode; 
} 

if (element.style.fontWeight != 'bold') { 
    for (var i = 0; i<element.cells.length; i++) { 
     if (element.cells[i].className != "no_hover") { 
      if (typeof oldcol_cellarray != undefined) { 

       element.cells[i].style.backgroundColor=oldcol_cellarray[i]; 
      } else { 
       element.cells[i].style.backgroundColor='#ffffff'; 

      } 
     //var oldcol_cellarray = new Array(); 

     } 
    } 
} 

}

// --------------------------------------------- --------------------------------------------------

功能get_first_state(元件){

while (element.tagName != 'TR') { 
    element = element.parentNode; 
} 
first_state = element.cells[0].firstChild.checked; 

}

// -------------------------- -------------------------------------------------- -------------------

function checkit(element){

while (element.tagName != 'TR') { 
    element = element.parentNode; 
} 
if (element.cells[0].firstChild.type == 'radio') { 
    var typ = 0; 
} else if (element.cells[0].firstChild.type == 'checkbox') { 
    typ = 1; 
} 
if (element.cells[0].firstChild.checked == true && typ == 1) { 
    if (element.cells[0].firstChild.checked == first_state) { 
     element.cells[0].firstChild.checked = false; 
    } 
    set_rowstyle(element, element.cells[0].firstChild.checked); 
} else { 
    if (typ == 0 || element.cells[0].firstChild.checked == first_state) { 
     element.cells[0].firstChild.checked = true; 

    } 
    set_rowstyle(element, element.cells[0].firstChild.checked); 
} 
if (typ == 0) { 
    var table = element.parentNode; 
    if (table.tagName != "TABLE") { 
     table = table.parentNode; 
    } 
    if (table.tagName == "TABLE") { 
     table=table.tBodies[0].rows; 
     //var table = document.getElementById("js_tb").tBodies[0].rows; 
     for (var i = 1; i< table.length; i++) { 
      if (table[i].cells[0].firstChild.checked == true && table[i] != element) { 
       table[i].cells[0].firstChild.checked = false; 
      } 
      if (table[i].cells[0].firstChild.checked == false) { 
       set_rowstyle(table[i], false); 
      } 
     } 
    } 
} 

}

功能set_rowstyle(R,上){

if (on == true) { 
    for (var i =0; i < r.cells.length; i++) { 
     r.style.fontWeight = 'bold'; 
     r.cells[i].style.backgroundColor = '#f2f2c2'; 

    } 
} else { 
    for (i =0; i < r.cells.length; i++) { 
     r.style.fontWeight = 'normal'; 
     r.cells[i].style.backgroundColor = '#ffffff'; 
    } 
} 

}

它正在按預期在IE中。

但來到Firefox我很驚訝看到輸出後,這麼多的編碼。

在Firefox中: - onMouseOver按預期工作。該特定行的顏色變化。

onClick - 永久性地設置背景顏色..第七步,我在不同的行上進行onmouseover。點擊的上一行顏色不會重置爲白色。 - 與預期不符

onclick on 2 rows..the background of the rows are set ..只有最新的行顏色應該設置。其他行被選定之前應該回退.. 不如預期即即使我點擊所有的行..背景顏色的一切都改變了......

雖然我點擊行。第一列,即單選按鈕或複選框沒有設置..

請幫我解決這個問題在Firefox中。請讓我知道我的代碼需要改變的地方...

在此先感謝!

+0

嘗試使用Firebug(http://getfirebug.com/)來調試javascript。 – 2010-05-10 06:18:31

回答

1

對不起, ,但這應該在所有的瀏覽器:

<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}"> 

這是一個完整的頁面,您可以測試出:

<html> 
<head> 
<style type="text/css"> 
tr.click{ 
background:yellow; 
} 

tr.hover{ 
background:green; 
} 
</style> 
</head> 
<body> 
<table border="1"> 
<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}"> 
<td> 
<input type="checkbox" readonly="readonly"/> click me 
</td> 
</tr> 
<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}"> 
<td> 
<input type="checkbox" readonly="readonly"/> click me 
</td> 
</tr> 
<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}"> 
<td> 
<input type="checkbox" readonly="readonly"/> click me 
</td> 
</tr> 
</table> 
</body> 
</html> 

我會強烈建議移動的一切外部JS文件,並使用某種初始化函數來分配事件監聽器,即而不是像我一樣將它們全部內聯編寫。

我希望這有助於某種方式。

+0

thanku verymuch :-)這很好用!我只有4個月的JavaScript。如果你能詳細解釋一下,我會很高興嗎? this.className.replace(/(^ | \ s)hover(\ s | $)/,''); – satya 2010-05-11 14:10:20

+0

'this'指表格行(我想你已經知道了) 'className'指類屬性 'replace(pattern,replacement)'是一個字符串方法,用於通過正則表達式或字符串替換文本 'this .className.replace(/(^ | \ s)hover(\ s | $)/,'')'將在whitepsace或字符串開頭的類屬性中查找單詞「懸停」通過空格或字符串的結尾,然後用一個空格替換它。 去這裏獲得更多關於正則表達式的信息:https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp – tau 2010-05-12 01:24:13

+0

謝謝你的詳細解釋。 – satya 2010-05-17 07:17:35

0

可能有一個特定的原因,你沒有,但你有沒有考慮過使用像JQuery這樣的庫來解決這個問題?你試圖在這裏完成的任務可以通過JQuery的類CSS選擇器和.parent/.parents輕鬆簡單地完成。正如MartyIX所說,我將首先在Firebug/Chrome中使用console.log和/或斷點來檢查正在執行哪些代碼塊。使用JavaScript調試工具可能會有點讓人望而生畏,除非您瞭解每個選項(逐步進入,逐步結束)的工作方式,但它們確實可以讓您檢查代碼是否正常工作,因爲您認爲它非常容易。

我在checkit()中注意到的一件事 - 小心你聲明變量的地方。我不是javascripts變量範圍的專家,但對我來說,它看起來像typ變量只存在於if塊中。我會在if塊之前聲明「var typ」,並使用第三個值或第二個變量來檢查是否找到任何複選框或收音機(如果沒有複選框並且沒有收音機,會發生什麼情況?)

+0

Thanku :-)我會嘗試用螢火蟲進行調試。 – satya 2010-05-11 14:16:44