Javascript ใช้สีและการเน้นช่วงแถวของตารางในตาราง

คัดลอกรหัสรหัสดังต่อไปนี้:

<script type="text/javascript">

ชื่อ var; //จัดเก็บชื่อคลาสของวัตถุ tr และเรียกคืนเมื่อเลื่อนเมาส์ออกไป

ฟังก์ชั่น trcolor(){ //แสดงช่วงสีของแถวตาราง

var tabNode = document.getElementsByTagName("ตาราง")[0];

var trNodes = tabNode.rows;

สำหรับ (var x=1;x<trNodes.length;x++){

ถ้า(x%2 == 1)

trNodes[x].className = "หนึ่ง";

อื่น

trNodes[x].className = "สอง";

trNodes[x].onmouseover = function(){/ //เน้น

ชื่อ = this.className;

this.className = "มากกว่า";

-

trNodes[x].onmouseout = function(){ //เพิ่มแอตทริบิวต์เหตุการณ์ onmouseout ให้กับวัตถุ tr

this.className = ชื่อ;

-

-

-

window.onload = trcolor;

</สคริปต์>

<style type="text/css">

ตาราง { ความกว้าง:60%; เส้นขอบ:ทึบ 1px #0066FF;}

ตาราง td {เส้นขอบ: ทึบ 1px #0099ff;}

a{ การตกแต่งข้อความ: ไม่มี;}

.one{สีพื้นหลัง: สีแดง;}

.two{สีพื้นหลัง: สีฟ้า;}

.over{สีพื้นหลัง: สีเหลือง;}

</สไตล์>

</หัว>

<ร่างกาย>

<ตาราง>

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

</ตาราง>

</ร่างกาย>