> 웹 프론트엔드 > JS 튜토리얼 > 테이블 대체 행 색상 변경 업그레이드 버전_javascript 기술

테이블 대체 행 색상 변경 업그레이드 버전_javascript 기술

WBOY
풀어 주다: 2016-05-16 18:42:21
원래의
970명이 탐색했습니다.

어제 행마다 색상을 변경하는 표를 만들었는데 한 표 내에서만 변경되었습니다
한 페이지에 여러 표가 있는 경우
새로운 결과를 조작하려면
다음과 같이 하세요. :

코드 복사 코드는 다음과 같습니다.

function onloadEvent(func){
var one=window.onload
if (typeof window.onload!='function'){
window.onload=func
}
else{
window.onload=function() {
one();
func();
}
}
function showtable(tableid){
var overcolor='#FCF9D8'
var color1='#FFFFFF';
var color2='#F8F8F8';
var tablename=document.getElementById(tableid)
var tr=tablename.getElementsByTagName("tr")
for( var i=0 ;itr[i].onmouseover=function(){
this.style.BackgroundColor=overcolor; .onmouseout=function(){
if (this.rowIndex%2==0){
this.style.BackgroundColor=color1;
}else{
this.style.BackgroundColor=color2;
}
}
if(i%2==0){
tr[i].className="color1"
}else{
tr[i].className ="color2";
}
}
}
onloadEvent(function init(){
showtable('table');
showtable('test');
}
);


이렇게 하면 html에 테이블을 추가할 때 ID를 추가해도 괜찮습니다. 여러 번 호출된 테이블은 행마다 색상이 변경됩니다.
멋진 삶은 설명할 필요가 없습니다.
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿