Home / Questions / 489949
Accepted
Efrain Mejias C
Asked: 2022-03-12 13:20:08 +0800 CST 2022-03-12 13:20:08 +0800 CST

How to get cell values ​​in HTML table with JQuery?

  • 772

I have an HTML table and needed to create a function that loops through it and gets the values ​​of the cells in each row.

Each cell contains its respective ID.

My HTML code:

<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>
javascript

1 Answers

  1. Best Answer

    To get the elements of all cells you can select all tdand add them in a arregloand select their content with text().

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

    If you want to create an array for each row, you can do:

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

    I attached a working example:

    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>

    Finally you can access each element of the array by row like porFila[0][0], porFila[1][2], etc. Note that the id you're using numbers rows starting at 0 and columns starting at 1, so the indexing won't be exactly like the id.

    • 3