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( "tab");
var str = "";
for(var i = 1; i <tableid.rows.length; i ++)
{
alert(tableid.rows [i] .cells [1] .innerhtml);
}
}
</script>
</head>
<body>
<表ID = "tab" onclick = "gettdValue()" cellpadding = "1" cellpacing = "1">
<tr style = "background-color:#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>
</table>
</body>
</html>
2。デザインの結果
(1)初期化
(2)2番目の列をクリックするとき