1. ใช้ซอร์สโค้ด
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> การใช้งาน JavaScript ได้รับค่าของคอลัมน์ในตาราง </title>
<script type = "text/javascript">
ฟังก์ชั่น gettdvalue ()
-
var tableId = document.getElementById ("แท็บ");
var str = "";
สำหรับ (var i = 1; i <tableid.rows.length; i ++)
-
การแจ้งเตือน (tableid.rows [i] .cells [1] .innerhtml);
-
-
</script>
</head>
<body>
<table id = "tab" onclick = "getTdValue ()" cellpadding = "1" cellpacing = "1">
<tr style = "พื้นหลังสี: #ccc;">
<th> หมายเลขนักเรียน </th>
<th> ชื่อ </th>
<th> เพศ </th>
<th> อายุ </th>
</tr>
<tr>
<td> 1 </td>
<td> li si </td>
<td> ชาย </td>
<Td> 22 </td>
</tr>
<tr>
<Td> 2 </td>
<TD> Wang Qian </td>
<td> หญิง </td>
<td> 20 </td>
</tr>
<tr>
<td> 3 </td>
<Td> Yu Qian </td>
<td> ชาย </td>
<Td> 18 </td>
</tr>
<tr>
<td> 4 </td>
<td> Liu Lang </td>
<td> หญิง </td>
<td> 19 </td>
</tr>
<tr>
<td> 5 </td>
<Td> Zhuge Liang </td>
<td> ชาย </td>
<td> 20 </td>
</tr>
<tr>
<td> 6 </td>
<td> Oriental Cloud </td>
<td> หญิง </td>
<Td> 21 </td>
</tr>
<tr>
<td> 7 </td>
<td> gongsun ce </td>
<td> ชาย </td>
<Td> 22 </td>
</tr>
<tr>
<td> 8 </td>
<td> baoqing </td>
<td> หญิง </td>
<Td> 23 </td>
</tr>
<tr>
<td> 9 </td>
<td> การศึกษาทางปัญญา </td>
<td> ชาย </td>
<td> 20 </td>
</tr>
<tr>
<td> 10 </td>
<td> liu sisi </td>
<td> หญิง </td>
<Td> 21 </td>
</tr>
</table>
</body>
</html>
2. ผลการออกแบบ
(1) การเริ่มต้น
(2) เมื่อคลิกคอลัมน์ที่สอง