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">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> javaScript 구현 테이블에서 열의 값을 가져옵니다 </title>
<script type = "text/javaScript">
함수 gettdValue ()
{
var table = document.getElementById ( "탭");
var str = "";
for (var i = 1; i <tableId.rows.length; i ++)
{
ALERT (TableId.Rows [i] .Cells [1] .innerHtml);
}
}
</스크립트>
</head>
<body>
<table id = "tab"onclick = "gettdValue ()"셀 패드 딩 = "1"CellPacing = "1">
<tr style = "배경색 : #ccc;">
<th> 학생 번호 </th>
<th> 이름 </th>
<th> 성별 </th>
<th> age </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> 동양 구름 </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>
</테이블>
</body>
</html>
2. 디자인 결과
(1) 초기화
(2) 두 번째 열을 클릭 할 때