Javascript는 단순히 테이블 행 간격 표시 색상 및 강조 표시를 구현합니다.

다음과 같이 코드 코드를 복사합니다.

<스크립트 유형="텍스트/자바스크립트">

var name; //tr 객체의 클래스 이름을 저장하고 마우스가 멀어지면 복원합니다.

function trcolor(){ //테이블 행 색상 간격 표시

var tabNode = document.getElementsByTagName("table")[0];

var trNodes = tabNode.rows;

for(var x=1;x<trNodes.length;x++){

if(x%2 == 1)

trNodes[x].className = "1";

또 다른

trNodes[x].className = "2개";

trNodes[x].onmouseover = function(){ //강조표시

이름 = this.className;

this.className = "오버";

}

trNodes[x].onmouseout = function(){ //tr 객체에 onmouseout 이벤트 속성 추가

this.className = 이름;

}

}

}

window.onload = trcolor;

</script>

<스타일 유형="텍스트/css">

테이블{ 너비:60%; 테두리:단색 1px #0066FF;}

테이블 td {테두리:단색 1px #0099ff;}

a{ 텍스트 장식: 없음;}

.one{배경색: 빨간색;}

.two{배경색: 파란색;}

.over{배경색: 노란색;}

</style>

</head>

<본문>

<테이블>

<tr>

<td>이름</td><td>나이</td><td>주소</td>

</tr>

<tr>

<td>장산</td><td>23</td><td>베이징</td>

</tr>

<tr>

<td>이思</td><td>25</td><td>상하이</td>

</tr>

<tr>

<td>王五</td><td>15</td><td>광저우</td>

</tr>

<tr>

<td>탕 씨</td><td>20</td><td>창사</td>

</tr>

</table>

</body>