2010-05-10 8 views
1

제 질문은 onMouseover, onMouseout, onMousedown, onClick 테이블 행입니다. 어떤 자바 스크립트 사용자 정의 함수를 호출합니다.HTML + javascript 마우스 오버, mouseout, onclick이 파이어 폭스에서 작동하지 않음

onMouseover --- 배경색이 변경되어야합니다. onMouseout --- 원본 색상으로 재설정 onClick --- 첫 번째 열 확인란/라디오 버튼을 설정하고 배경색을 변경해야합니다. onMousedown --- 배경색이 변경되어야합니다.

HTML에서 내 코드입니다 : - <tr onMouseOver="hover(this)" onMouseOut="hover_out(this)" onMouseDown="get_first_state(this)" onClick="checkit(this)" >

와 자바 스크립트의 방법은 다음과 같습니다 -

var에 first_state = 거짓;

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) {

IE 예상대로 515,
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'; 
    } 
} 

}

그것은 작동된다.

하지만 파이어 폭스에 와서 나는 많은 코딩을 한 후에 결과물을 보면서 놀랐다.

Firefox의 경우 : - onMouseOver가 예상대로 작동합니다. 해당 특정 행의 색상 변경.

onClick - 배경색을 영구히 설정합니다. 다른 행에 대해서는 onmouseover를 수행합니다. 클릭 한 이전 행 색상은 흰색으로 재설정되지 않습니다.- 예상대로 아님

onclick on 2 rows .. 두 행의 배경이 설정됩니다. 최신 행 색상 만 설정해야합니다. 이전에 선택한 다른 행을 다시 설정해야합니다. 예기치 않은 것 같습니다. 즉 모든 행을 클릭하면 모든 배경색이 변경됩니다.

이벤트를 클릭해도 표시됩니다. 첫 번째 열, 즉 라디오 버튼 또는 체크 박스가 설정되지 않았습니다.

Firefox에서이 문제를 해결하는 데 도움을주세요. 내 코드를 어디에서 변경해야하는지 알려주세요 ...

미리 감사드립니다 !!

+0

Firebug (http://getfirebug.com/)를 사용하여 자바 스크립트를 디버그하십시오. –

답변

1

모든 것을 인라인으로 만들면 죄송합니다. 하지만,이 모든 브라우저에서 작동해야합니다

<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 파일에 모든 이동 및 초기화의 일종을 사용하여 권합니다 : 여기

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

당신이 테스트 할 수있는 전체 페이지입니다 이벤트 리스너를 할당하는 함수, i 나처럼 모든 것을 인라인으로 써주세요.

나는 이것이 어떤면에서 도움이되기를 바랍니다.

+0

thanku verymuch :-) 그게 훌륭합니다! 나는 자바 스크립트에서 불과 4 개월입니다. 당신이 조금 더 자세하게 설명 할 수 있다면 기쁠 것입니다. this.className.replace (/ (^ | \ s) 호버 (\ s | $) /, ''); – satya

+0

'this'는 테이블 행을 참조합니다. (이미 알고 있다고 생각합니다.)'className'은 클래스 속성을 참조합니다. 'replace (pattern, replacement)'는 정규 표현식이나 문자열을 통해 텍스트를 대체하는 문자열 메소드입니다. 'this .className.replace (/ (^ | \ s) hover (\ s | $) /, '')'는 whitepsace 또는 문자열의 시작 부분과 뒤에 오는 클래스 속성에서 "hover"라는 단어를 찾습니다 공백 또는 문자열의 끝을 입력 한 다음 단일 공백으로 바꿉니다. regex에 대한 자세한 내용은 여기를 참조하십시오. https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp – tau

+0

자세한 설명은 감사합니다. – satya

0

특별한 이유가있을 수 있습니다 만,이 문제를 해결하기 위해 JQuery와 같은 라이브러리를 사용 해본 적이 있습니까? 여기에서 달성하고자하는 것은 JQuery의 CSS와 같은 선택기 및 .parent/.parent를 사용하여 매우 쉽고 간단하게 수행 할 수 있습니다.

MartyIX가 말하기를 Firebug/Chrome에서 console.log 및/또는 중단 점을 사용하여 실행중인 코드 블록을 정확하게 확인하는 것으로 시작합니다. 자바 스크립트 디버깅 도구를 사용하면 각 옵션이 어떻게 작동 하는지를 알기 전까지는 조금 어려울 수 있지만 매우 쉽게 생각하는대로 코드가 작동하는지 확인할 수 있습니다.

checkit()에서주의해야 할 것은 변수를 선언 할 때주의해야합니다. 저는 javascripts 변수 범위 지정에 익숙하지 않지만 typ 변수는 if 블록 내에 만 존재합니다. if 블록 앞에 "var typ"를 선언하고 세 번째 값 또는 두 번째 변수를 사용하여 확인란이나 라디오가 있는지 확인합니다 (체크 박스가없고 라디오가 없으면 어떻게됩니까?)

+0

Thanku :-) 나는 방화 갓으로 디버깅을 시도 할 것이다. – satya

관련 문제