1. Implémentez le code source
La copie de code est la suivante:
<! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> L'implémentation JavaScript obtient la valeur d'une colonne dans la table </TITAL>
<script type = "text / javascript">
fonction getTDValue ()
{
var tableId = document.getElementById ("tab");
var str = "";
pour (var i = 1; i <tableid.Rows.length; i ++)
{
alert (tableId.Rows [i] .Cells [1] .InnerHtml);
}
}
</cript>
</ head>
<body>
<table id = "tab" onclick = "getTDValue ()" cellpadding = "1" cellpacing = "1">
<tr style = "Background-Color: #ccc;">
<th> numéro d'étudiant </th>
<th> nom </th>
<th> genre </th>
<th> Âge </th>
</tr>
<tr>
<td> 1 </td>
<td> li si </td>
<td> mâle </td>
<td> 22 </td>
</tr>
<tr>
<td> 2 </td>
<TD> Wang Qian </td>
<TD> Femme </td>
<td> 20 </td>
</tr>
<tr>
<td> 3 </td>
<Td> Yu Qian </td>
<td> mâle </td>
<td> 18 </td>
</tr>
<tr>
<td> 4 </td>
<td> liu lang </td>
<TD> Femme </td>
<td> 19 </td>
</tr>
<tr>
<td> 5 </td>
<TD> Zhuge Liang </td>
<td> mâle </td>
<td> 20 </td>
</tr>
<tr>
<td> 6 </td>
<TD> Cloud oriental </td>
<TD> Femme </td>
<td> 21 </td>
</tr>
<tr>
<td> 7 </td>
<TD> Gongsun ce </td>
<td> mâle </td>
<td> 22 </td>
</tr>
<tr>
<td> 8 </td>
<td> baoqing </td>
<TD> Femme </td>
<td> 23 </td>
</tr>
<tr>
<td> 9 </td>
<TD> Education intellectuelle </td>
<td> mâle </td>
<td> 20 </td>
</tr>
<tr>
<td> 10 </td>
<Td> Liu Sisi </TD>
<TD> Femme </td>
<td> 21 </td>
</tr>
</ table>
</docy>
</html>
2. Résultats de conception
(1) initialisation
(2) Lorsque vous cliquez sur la deuxième colonne