Insert data with each to a jquery table

Question

Insert data with each to a jquery table

Navigation

#1 by (1 votes)

0

Currently I go through an array and I show data in a table, dynamically, what happens to me is that it inserts all the values in the last row of the table and skips the first one, in what way can I do so that the Do you insert data from the first row to the last?

 $.each(objView.ArrayStock, function(indice, elemento) {
        $.each(elemento, function(indice2, elemento2) {
        $("#table1 td:last").before('<td>'+elemento2.STOCK_REAL+'</td>');
       /* uso el last para insertarlo entre dos columnas */          
        })

     });

This is my table, I need to insert the array data between two columns of my previously built table.

    <table id="table1">
        <thead>
          <tr>
              <th>Descripción</th>
              <th>Codigo</th>
              <th>Precio</th>
              <th>Eliminar</th>                                               
          </tr>
         </thead>

      <tbody>                                             
         <tr >
            <td>LIQUIDO DE FRENO               
            </td><td>08852</td>
/*entre estas dos columnas necesito ingresar los datos del array/* 
            <td>45000</td>
         </tr>

         <tr>
          <td>LIQUIDO DE FRENO</td>
          <td>05215</td>
/*entre estas dos columnas necesito ingresar los datos del array*/ 
          <td>44000</td>
        </tr>

      </tbody>  
    </table>

My problem is that all the data in the array is inserted in the last example column of my error:

<tbody>                                             
             <tr >
                <td>LIQUIDO DE FRENO               
                </td><td>08852</td>
                <td>45000</td>/*aca deberian ir datos pero se la salta la primera fila*/
             </tr>

             <tr>
              <td>LIQUIDO DE FRENO</td>
              <td>05215</td>
              <td>44000</td>
              <td>dato insertado</td>/* se insertan en el ultimo tr del body y se salta la primera fila de mi tabla */
              <td>dato insertado</td>
              <td>dato insertado</td>
              <td>dato insertado</td>
            </tr>

          </tbody>

Thanks for your attention greetings.

jquery html

asked by Javier Antonio Aguayo Aguilar 19.05.2017 в 22:25

source

1 answer

Configure XAMPP LAN network Create JSTL accumulator

score 1 · Answer 1

It is normal the operation that has until now, since it looks for the last td of its table and there it inserts the new element. I propose a solution for this, select all the rows (tr) by querySelectorAll of the table and iterate over them and add the new row depending on the Array

Example

var array = ['Hola1', 'Hola2','Hola3'];
var i=0;
$.each(document.querySelectorAll("#mitabla tbody tr"), function(index, val) {
   if(i< array.length)
        $(val).append("<td>"+ array[i++]+"</td>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mitabla" border="2" >
    <thead>
        <tr>
            <th>Descripción</th>
              <th>Codigo</th>
              <th>Precio</th>
              <th>Eliminar</th>
        </tr>
    </thead>
    <tbody >
        <tr>
            <td>LIQUIDO DE FRENO</td>
            <td>08852</td>
        </tr>
        <tr>
          <td>LIQUIDO DE FRENO1</td>
          <td>052153</td>
        </tr>
        <tr>
          <td>LIQUIDO DE FRENO2</td>
          <td>052152</td>
        </tr>
    </tbody>
</table>