2

Tengo una tabla HTML y necesitó crear una función que la recorra y obtenga los valores de las celdas de cada fila.

Cada celda contiene su respectivo ID.

Mi código HTML:

<table id="tablaLineas" class="display compact dt-center table table-striped table-light" style="width:100%">
                <thead class="thead-dark">
                    <tr>
                        <th style="display:none;">Nº</th>
                        <th>Article</th>
                        <th>Unit</th>
                        <th>Description</th>
                        <th>Amount</th>
                        <th>Price</th>
                        <th>Subtotal</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    </tr><tr id="r0">
                  <td style="display:none;"> 0 </td>
                  <td id="r10"> TV </td>
                  <td id="r20"> UNIT </td>
                  <td id="r30"> Descripcion TV </td>
                  <td id="r40"> 23 </td>
                  <td id="r50"> 2 </td>
                  <td id="r60"> 46 </td>
                  <td><a href="javascript:void(0)" class="btn btn-sm btn-danger" onclick="RemoveLinea(0)"><small><i class="mdi mdi-delete-forever"></i></small></a></td>
                  </tr><tr id="r1">
                  <td style="display:none;"> 1 </td>
                  <td id="r11"> Laptop </td>
                  <td id="r21"> UNIT </td>
                  <td id="r31"> Descripcion laptop </td>
                  <td id="r41"> 10 </td>
                  <td id="r51"> 5 </td>
                  <td id="r61"> 50 </td>
                  <td><a href="javascript:void(0)" class="btn btn-sm btn-danger" onclick="RemoveLinea(1)"><small><i class="mdi mdi-delete-forever"></i></small></a></td>
                  </tr><tr id="r2">
                  <td style="display:none;"> 2 </td>
                  <td id="r12"> Telefono </td>
                  <td id="r22"> UNIT </td>
                  <td id="r32"> Descripcion laptop </td>
                  <td id="r42"> 3 </td>
                  <td id="r52"> 20 </td>
                  <td id="r62"> 60 </td>
                  <td><a href="javascript:void(0)" class="btn btn-sm btn-danger" onclick="RemoveLinea(2)"><small><i class="mdi mdi-delete-forever"></i></small></a></td>
                  </tr><tr id="r3">
                  <td style="display:none;"> 3 </td>
                  <td id="r13"> Memoria </td>
                  <td id="r23"> UNIT </td>
                  <td id="r33"> Descripcion Memora </td>
                  <td id="r43"> 15 </td>
                  <td id="r53"> 3 </td>
                  <td id="r63"> 45 </td>
                  <td><a href="javascript:void(0)" class="btn btn-sm btn-danger" onclick="RemoveLinea(3)"><small><i class="mdi mdi-delete-forever"></i></small></a></td>
                  </tr>
                </tbody>
            </table>

1 respuesta 1

3

Para obtener los elementos de todas las celdas puedes seleccionar todos los td y agregarlos en un arreglo y seleccionar su contenido con text().

let items = []
$('td').each( function(){
   if( $(this).attr('id'))
   items.push( $(this).text() );       
});

Si quieres crear un arreglo por cada fila, puedes hacer:

const porFila = [];
while(items.length)
  porFila.push(items.splice(0,6));

Te adjunto un ejemplo funcional:

let items = []
let itemObj = {}
$('td').each( function(){
   if( $(this).attr('id')){
    items.push( $(this).text());
    
    //Alternativamente con creando un Objeto
    itemObj[ $(this).attr('id')] = $(this).text()
    }       
});
console.log(items)
console.log(itemObj)


const porFila = [];
while(items.length)
  porFila.push(items.splice(0,6));
  
console.log(porFila)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tablaLineas" class="display compact dt-center table table-striped table-light" style="width:100%">
                <thead class="thead-dark">
                    <tr>
                        <th style="display:none;">Nº</th>
                        <th>Article</th>
                        <th>Unit</th>
                        <th>Description</th>
                        <th>Amount</th>
                        <th>Price</th>
                        <th>Subtotal</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    </tr><tr id="r0">
                  <td style="display:none;"> 0 </td>
                  <td id="r10"> TV </td>
                  <td id="r20"> UNIT </td>
                  <td id="r30"> Descripcion TV </td>
                  <td id="r40"> 23 </td>
                  <td id="r50"> 2 </td>
                  <td id="r60"> 46 </td>
                  <td><a href="javascript:void(0)" class="btn btn-sm btn-danger" onclick="RemoveLinea(0)"><small><i class="mdi mdi-delete-forever"></i></small></a></td>
                  </tr><tr id="r1">
                  <td style="display:none;"> 1 </td>
                  <td id="r11"> Laptop </td>
                  <td id="r21"> UNIT </td>
                  <td id="r31"> Descripcion laptop </td>
                  <td id="r41"> 10 </td>
                  <td id="r51"> 5 </td>
                  <td id="r61"> 50 </td>
                  <td><a href="javascript:void(0)" class="btn btn-sm btn-danger" onclick="RemoveLinea(1)"><small><i class="mdi mdi-delete-forever"></i></small></a></td>
                  </tr><tr id="r2">
                  <td style="display:none;"> 2 </td>
                  <td id="r12"> Telefono </td>
                  <td id="r22"> UNIT </td>
                  <td id="r32"> Descripcion laptop </td>
                  <td id="r42"> 3 </td>
                  <td id="r52"> 20 </td>
                  <td id="r62"> 60 </td>
                  <td><a href="javascript:void(0)" class="btn btn-sm btn-danger" onclick="RemoveLinea(2)"><small><i class="mdi mdi-delete-forever"></i></small></a></td>
                  </tr><tr id="r3">
                  <td style="display:none;"> 3 </td>
                  <td id="r13"> Memoria </td>
                  <td id="r23"> UNIT </td>
                  <td id="r33"> Descripcion Memora </td>
                  <td id="r43"> 15 </td>
                  <td id="r53"> 3 </td>
                  <td id="r63"> 45 </td>
                  <td><a href="javascript:void(0)" class="btn btn-sm btn-danger" onclick="RemoveLinea(3)"><small><i class="mdi mdi-delete-forever"></i></small></a></td>
                  </tr>
                </tbody>
            </table>

Finalmente puedes acceder a cada elemento del array por fila como porFila[0][0], porFila[1][2], etc. Ten en cuenta que el id que estás usando numera las filas empezando en 0 y las columnas empezando en 1, por lo que la indexación no será exactamente como el id.

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.