1. Implementar el código fuente
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> La implementación de JavaScript obtiene el valor de una columna en la tabla </title>
<script type = "text/javaScript">
función getTDValue ()
{
var tableID = document.getElementById ("pestaña");
var str = "";
para (var i = 1; i <tableID.rows.length; i ++)
{
alerta (tableID.rows [i] .Cells [1] .innerhtml);
}
}
</script>
</ablo>
<Body>
<Tabla id = "tab" onClick = "getTDValue ()" cellPadding = "1" CellPacing = "1">
<tr style = "Background-Color: #CCC;">
<th> Número de estudiante </th>
<th> nombre </th>
<th> género </th>
<th> edad </th>
</tr>
<tr>
<TD> 1 </td>
<TD> li si </td>
<td> macho </td>
<TD> 22 </td>
</tr>
<tr>
<TD> 2 </td>
<TD> Wang Qian </td>
<td> femenina </td>
<TD> 20 </td>
</tr>
<tr>
<TD> 3 </td>
<Td> Yu Qian </td>
<td> macho </td>
<TD> 18 </td>
</tr>
<tr>
<TD> 4 </td>
<TD> liu lang </td>
<td> femenina </td>
<TD> 19 </td>
</tr>
<tr>
<TD> 5 </td>
<TD> Zhuge Liang </td>
<td> macho </td>
<TD> 20 </td>
</tr>
<tr>
<TD> 6 </td>
<TD> Cloud Oriental </td>
<td> femenina </td>
<TD> 21 </td>
</tr>
<tr>
<TD> 7 </td>
<TD> Gongsun CE </td>
<td> macho </td>
<TD> 22 </td>
</tr>
<tr>
<TD> 8 </td>
<TD> baoqing </td>
<td> femenina </td>
<TD> 23 </td>
</tr>
<tr>
<TD> 9 </td>
<TD> Educación intelectual </td>
<td> macho </td>
<TD> 20 </td>
</tr>
<tr>
<TD> 10 </td>
<TD> liu sisi </td>
<td> femenina </td>
<TD> 21 </td>
</tr>
</table>
</body>
</html>
2. Resultados de diseño
(1) Inicialización
(2) Al hacer clic en la segunda columna