Buscar este blog

Quien soy

Madrid, Madrid, Spain

HTML + JavaScript Recorrer una Tabla


<table>


Para recorrer los nodos de una tabla hasta llegar al contenido almacenado en una celda utilizando Javascript hay que recurrir al uso de los metodos:

  • elemento.childNodes

  • elemento.childNodes[i]

  • elemento.childNodes[i].firstChild

  • elemento.childNodes.firstChild

Haciendo pruebas de ensayo y error hasta obtener el valor de una celda en concreto, descubrí que importa y mucho como esta creada la tabla.

EJEMPLO 1:

<table id="tblLista">
<thead>
<tr>
<th>F.</th><th>CONCEPTO</th><th>CANTIDAD</th><th></th><th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>2</label>
</td>
<td>
<label>flecha</label>
</td>
<td>
<label>5.00</label>
</td>
<td>
<input type="button" id="botRegM0" name="botRegM0" value="Modificar" />
</td>
<td>
<input type="button" id="botRegE0" name="botRegE0" value="Eliminar" />
</td>
</tr>
<tr>
<td>
<label>5</label>
</td>
<td>
<label>tomates</label>
</td>
<td>
<label>7.20</label>
</td>
<td>
<input type="button" id="botRegM1" name="botRegM1" value="Modificar" />
</td>
<td>
<input type="button" id="botRegE1" name="botRegE1" value="Eliminar" />
</td>
</tr>
</tbody>
</table>

EJEMPLO 2:

<table id="tblLista">
<thead>
<tr>
<th>F.</th><th>CONCEPTO</th><th>CANTIDAD</th><th></th><th></th>
</tr>
</thead>
<tbody><tr>
<td><label>2</label></td>
<td><label>flecha</label></td>
<td><label>5.00</label></td>
<td><input type="button" id="botRegM0" name="botRegM0" value="Modificar" /></td>
<td><input type="button" id="botRegE0" name="botRegE0" value="Eliminar" /></td>
</tr><tr>
<td><label>5</label> </td>
<td><label>tomates</label></td>
<td><label>7.20</label></td>
<td><input type="button" id="botRegM1" name="botRegM1" value="Modificar" />
</td><td><input type="button" id="botRegE1" name="botRegE1" value="Eliminar" />
</td></tr>
</tbody>
</table>

Aunque las dos tengan el mismo contenido y visualmente sean identicas, el recorrido debe de ser distinto ya que en el primer ejemplo las indentaciones y los saltos de linea los detecta como nodos de texto vacios.

En el segundo ejemplo no hay saltos de linea entre tr's ni tampoco de un td a su label asi, los nodos de texto desaparecen y si antes para llegar al texto que habia en un label habria que hacerlo con una i=4 por ejemplo aqui seria con i=1.

Esto me sucedio porque PHP me generaba una tabla con una identacion en las tr y td que no se como la calcula dando como resultado el ejemplo 2 y claro, el algoritmo que habia creado funcionaba perfectamente para el ejemplo 1 cuya tabla la tome como modelo y la hice manualmente.

Lo que no entiendo y si alguien lo podria comentar seria estupendo, es porque en XML se puede identar y hacer saltos de linea sin que estos sean tomados como nodos de texto.

2 comentarios:

edu dijo...

wza

Unknown dijo...

Y bueno donde mierda está el ejemplo en javascript capo?

Publicar un comentario