Los desarrolladores web utilizan tablas para mostrar datos complejos. Una tabla consta de filas y columnas; estas filas y columnas crean una cuadrícula que contiene células. A veces una aplicación Web necesita examinar una célula específica y realizar otras funciones. Por ejemplo, el código podría ocultar la célula, cambiar su color o extraer valor de la celda. Una de las maneras más rápidas para extraer un valor de una celda de la tabla es el uso de JavaScript.
Instrucciones
1 Abra una de sus páginas HTML usando el Bloc de notas y añadir este texto a la sección "cuerpo" del documento:
<Table id = frontera "myTable" = "3">
<Tr>
<Td id = "C1.1"> red </ td> <td id = "C1.2"> amarillo </ td>
</ Tr>
<Tr>
<Td id = "C2.1"> Blue </ td> <td id = "C2.2"> Verde </ td>
</ Tr>
</ Table>
<Id de entrada = "SshowTableCellValue" type = "button" value = "Mostrar tabla valor de celda" onclick = "showTableCellValue ()" /> <p> </ p>
Ingrese número de fila <input id = "Fila" type = "text" />
Introducir número de teléfono <id de entrada = "célula" type = "text" />
Esto genera una tabla con dos filas y dos columnas. Esto produce cuatro células. Cada célula contiene el nombre de un color. El código también crea un botón y dos cuadros de texto para introducir valores de fila y columna. Estos cuadros de texto permiten poner a prueba la aplicación.
2 Agregue el siguiente código JavaScript a la sección de "cabeza" de su documento:
<Script type = "text / javascript">
prueba de funcionamiento() {
var elTableRow = document.getElementById ( "somerow");
var = elTableCells elTableRow.getElementsByTagName ( "TD");
alerta (elTableCells [0] .innerText);
}
// Línea 1
var IDtabla = "myTable";
showTableCellValue función () {
// Líneas 3-4
var rowChosen = document.getElementById ( "fila") Valor -. 1;
var cellChosen = document.getElementById ( "célula") valor -1.;
// Líneas 5
var objTable = document.getElementById (tabla);
// Línea 6
var = SelectedValue objTable.rows [rowChosen] .cells [cellChosen] .innerHTML;
alert ( "seleccionado" + SelectedValue);
}
</ Script>
Una línea almacena el ID de la tabla en la variable denominada "IDtabla." Líneas de tres al cuatro recuperar los valores de las filas y columnas en los cuadros de texto. Línea de cinco recupera una referencia a la tabla y la línea de seis extractos del valor de la celda seleccionada.
3 Guarde el documento HTML y abrirlo en su navegador para ver la tabla.
4 Introduzca un número de fila en el cuadro de texto "Introducir número de fila". Introduzca un número de células en el cuadro de texto "Introducir número de teléfono".
5 Haga clic en el botón "Mostrar valor de celda". El código se ejecutará, y el navegador mostrará el valor de la celda seleccionada.
Consejos y advertencias
- Compruebe que el valor que establezca para "IDtabla" en el código JavaScript coincide con el ID de tabla que se da a su mesa en la sección de "cuerpo" del documento HTML. En este ejemplo, que el valor es "myTable." Usar cualquier nombre que se desee.