2

Buenas tardes programadores, estoy intentando recorrer una tabla de HTML con JAVASCRIPT para actualizar diversos estados de la informacion que contendra, pero no logro dar al clavo.

Esta esta es mi tabla en HTML

        <table class="rwd-table" id="rwd-table-id">
            <tr>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Estado</th>
            </tr>
            <tr>
                <td id="name">Juan</td>
                <td id="apellido">Perez</td>
                <td id="status">Online</td>
            </tr>
            <tr>
                <td id="name">Pedro</td>
                <td id="apellido">Lopez</td>
                <td id="status">Online</td>
            </tr>
            <tr>
                <td id="name">Antonia</td>
                <td id="apellido">Sandoval</td>
                <td id="status">Online</td>
            </tr>
        </table>

Esta es mi funcion de javascript

    try{
        var resume_table = document.getElementById("rwd-table-id");
        
        for (var i = 0, cell; cell = resume_table[i]; i++) {
            alert("Valor Celda: " + cell[i].innerText);
        }
    }
    catch(error)
    {
        alert('Error processing document ' + console.error(error));
    }

Agradezco las respuestas constructivas

6
  • Podrías adjuntar una imágen de la tabla y explicar qué es lo que quieres realizar exactamente y detalladamente, para poderte ayudar.
    – valle50
    Commented el 4 feb. 2021 a las 22:57
  • Por ejemplo, quiero poner el numero 1 en amarillo y el Online en verde. Pero para eso debo de recorrer la tabla completamente con un ciclo for el cual me esta dando problemas... Commented el 4 feb. 2021 a las 23:11
  • Que error te muestra? al parecer el for es el que no tiene bien definidos los parámetros
    – valle50
    Commented el 4 feb. 2021 a las 23:13
  • el catch del try me dice 'undefined' Commented el 4 feb. 2021 a las 23:14
  • En ambos ciclos estás recorriendo cells, el primero debería ser por rows.
    – Triby
    Commented el 4 feb. 2021 a las 23:53

2 respuestas 2

6

Hay varios errores en tu forma de recorrer la tabla.

  1. En el primer for tienes que buscar las filas con resume_table.rows, pero tú estas buscando con resume_table.cells

  2. El segundo for está bien, pero no tienes que usar j para encontrar la celda, al ser dos bucles anidados, col será cada valor, como podrás ver en el console.log.

A partir de ahí puedes operar con tus datos, o bien optar por otra forma de lectura, dependiendo de lo que quieras lograr.

Puedes probar el código, he impreso valor, fila y celda, para que entiendas cómo funciona.

var resume_table = document.getElementById("rwd-table-id");

for (var i = 0, row; row = resume_table.rows[i]; i++) {
  //alert(cell[i].innerText);
  for (var j = 0, col; col = row.cells[j]; j++) {
    //alert(col[j].innerText);
    console.log(`Txt: ${col.innerText} \tFila: ${i} \t Celda: ${j}`);
  }
}
<table class="rwd-table" id="rwd-table-id">
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Estado</th>
  </tr>
  <tr>
    <td id="name">Juan</td>
    <td id="apellido">Perez</td>
    <td id="status">Online</td>
  </tr>
  <tr>
    <td id="name">Pedro</td>
    <td id="apellido">Lopez</td>
    <td id="status">Online</td>
  </tr>
  <tr>
    <td id="name">Antonia</td>
    <td id="apellido">Sandoval</td>
    <td id="status">Online</td>
  </tr>
</table>

A partir de ahí podrás operar con tu tabla, recurriendo a ciertos trucos, por ejemplo, si quieres ignorar la primera fila, sólo tienes que poner el primer bucle así:

for (var i = 1, row; row = resume_table.rows[i]; i++) {

Igualando i a 1 ignorarías la primera fila. Luego, dependiendo de tu objetivo final, podría haber otras formas de acceder a ciertos valores directamente, por su posición en la tabla por ejemplo, o por su id.

Por ejemplo, si se trata de modificar ciertos elementos, podrías valerte también de clases CSS para eso, asignando una cierta clase a unos determinados elementos.

4
  • 1
    Me gusta mucho esta respuesta porque aporta datos en el resultado y está bien trabajada +1. Commented el 5 feb. 2021 a las 2:24
  • en caso que desee seleccionar solo la primer columna como seria el scrit? Commented el 14 jul. 2022 a las 2:45
  • 1
    @kevingarciamorales la primera columna de cada fila la tendrías en row.cells[0].
    – A. Cedano
    Commented el 14 jul. 2022 a las 2:59
  • sera me pueda ayudar en esta pregunta. es.stackoverflow.com/questions/546113/… Commented el 14 jul. 2022 a las 3:21
1

De entrada hay algunas malas prácticas que sería recomendable evitar, como asignar el mismo identificado a más de un elemento. En su lugar, mejor utilizar alguna clase o atributo personalizado.

Por otro lado, la cabecera de la tabla y el cuerpo no usan las etiquetas theado tbody, aunque no afecta, pero puede complicarte al seleccionar e iterar por los nodos de HTML.

Te dejo una aproximación:

const resume_table = document.getElementById("rwd-table-id");

const tableRows = document.querySelectorAll('#rwd-table-id tr.row');

// Recorremos las filas que tengan el class="row"
// así obviamos la cabecera
for(let i=0; i<tableRows.length; i++) {
  const row = tableRows[i];
  const status = row.querySelector('.status');
  console.log('Estado: ', status.innerText);
  
  // Para modificar un estado:
  // status.innerText = 'offline';
}
<table class="rwd-table" id="rwd-table-id">
            <tr class="header-row">
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Estado</th>
            </tr>
            <tr class="row">
                <td class="name">Juan</td>
                <td class="apellido">Perez</td>
                <td class="status">Online</td>
            </tr>
            <tr class="row">
                <td class="name">Pedro</td>
                <td class="apellido">Lopez</td>
                <td class="status">Online</td>
            </tr>
            <tr class="row">
                <td class="name">Antonia</td>
                <td class="apellido">Sandoval</td>
                <td class="status">Online</td>
            </tr>
        </table>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.