Cómo llenar una celda de tabla con JavaScript

Manipulación de tablas HTML requiere JavaScript. El Modelo de objetos de documento HTML, o DOM, ofrece a los desarrolladores la capacidad de utilizar JavaScript para cambiar la propiedad innerHTML de cualquier elemento de una página web, incluyendo celdas de la tabla. La propiedad innerHTML genera el contenido que aparece en una página Web. Usted puede cambiar la propiedad innerHTML de una celda de tabla, por ejemplo, cuando un usuario hace clic en un botón Mostrar Precio. Esta acción puede provocar un precio a aparecer en la célula. Una vez que entienda cómo utilizar el DOM para localizar un celular, se puede llenar con cualquier valor al instante. 

JAVASCRIPT

Abra un documento HTML y pegue el siguiente código en la sección de cuerpo del documento:

mesa de id = TestTable1 border = 1 tr tdno valor / td tdno valor / td / tr

tr tdno valor / td tdno valor / td / tr

tr tdno valor / td tdno valor / td / tr

/ Tipo de entrada de tabla = valor del botón Fill onclick = Celular = retorno fillCell ('TestTable1', '2 ', '1', 'Valor de prueba') /

Este código crea una nueva tabla. El cuadro, cuyo id es TestTable1 contiene tres filas con dos celdas por fila. El botón llama a una función JavaScript llamada fillCell. Esto permite localizar un celular y lo llena con el valor Valor de prueba aprobada en el evento de clic de botón.

Pega el código que aparece abajo en la sección de escritura del documento:

función fillCell (mesa, targetRow, targetCell, fillContents) {

var tableObj = document.getElementById (tabla); var SelectedRow = tableObj.rows [targetRow-1];

var selectedCell = selectedRow.cells [targetCell-1]; selectedCell.innerHTML = fillContents;}

Esta función recibe el identificador de tabla, fila de destino y la célula diana aprobada por el clic de botón. También recibe el valor que desea utilizar para rellenar la celda de destino. El código a continuación, localiza la celda deseada dentro de la fila de destino y establece su propiedad innerHTML para el valor almacenado en la variable fillContents.

Guarde el documento y visualizarlo en un navegador. Haga clic en el botón para ejecutar la función JavaScript. Se localiza en la primera celda de la segunda fila y se llena la cubeta con la palabra valor de prueba.

Consejos y advertencias

Retire el contenido de una celda, fijando el valor de cellContents a antes de llamar a la función fillCell. Esto establece el valor innerHTML de la célula diana de espacios en blanco.