like going through a table and getting the values inside the input with jquery

1

I want to go through the table and get the value inside each td and then inside the input in its value property.

I have this but it does not work for me. it returns only the first 2 columns the rest that has input does not do it.

$("#2a tbody tr").each(function(el){
    var itemOrden = {};
    var tds = $(this).find("td");
    itemOrden.Codigo = tds.filter(":eq(0)").text();
    itemOrden.Descripcion = tds.filter(":eq(1)").text();
    itemOrden.Precio = parseFloat(tds.filter(":eq(2)").text()); 

    itemes.push(tds);
});


<div class="tab-pane" id="2a">
        <div class="col-lg-12 col-sm-6 col-xs-3">
            <table class="table table-striped">
                <thead>
                    <th>Codigo Barra</th>
                    <th>Producto</th>
                    <th>Costo Base</th>
                    <th>Margen % Compra</th>        
                    <th>% Impuesto</th>
                    <th>P.F Actual</th>
                    <th>Precio Base Compra</th>
                    <th>P.F Compra</th>
                    <th>Accion</th>
                </thead>
                <tbody id="ajuste">     
                    @foreach($detalles as $detalle)
                        <tr class="success">
                            <td>{{ $detalle->producto->codigo_barra }}</td>
                            <td>{{ $detalle->producto->descripcion_corto }}</td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" id="{{'costo_' . $detalle->id}}" name="{{'costo_' . $detalle->id}}" value="{{ $detalle->costo_base }}" readonly >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" id="{{'margen_' . $detalle->id}}" name="{{'margen_' . $detalle->id}}" value="{{ $detalle->margen_utilidad }}" >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" id="{{'tasa_' . $detalle->id}}" name="{{'tasa_' . $detalle->id}}" value="{{ $detalle->tasa_impuesto }}" readonly  >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0"  class="form-control" id="{{'preciofinal_' . $detalle->id}}" name="{{'preciofinal_' . $detalle->id}}" value="{{ $detalle->precio_final }}" >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0"  class="form-control" id="{{'preciobasecompra_' . $detalle->id}}" name="{{'preciobasecompra_' . $detalle->id}}" value="{{ $detalle->precio_base_compra }}" readonly>
                            </td>

                            <td>
                                <input type="number" step="0.01" min="0"  class="form-control" id="{{'preciofinalcompra_' . $detalle->id}}" name="{{'preciofinalcompra_' . $detalle->id}}" value="{{ $detalle->precio_final_compra }}" >
                            </td>

                            <td >   
                                <button id="{{$detalle->id}}" name="{{$detalle->id}}" type="button" class="btn btn-success btn">Guardar</button>
                            </td>
                        </tr>
                    @endforeach                         
                </tbody>
            </table>            
        </div>
        {!! $detalles->render()!!}
    </div>

</div>
    
asked by Juan Liang 02.01.2018 в 20:45
source

1 answer

1

For your example it could be done in the following way

function resultado(){
	  var filas = $("#ajuste").find("tr"); //devulve las filas del body de tu tabla segun el ejemplo que brindaste
	  var resultado = "";
	for(i=0; i<filas.length; i++){ //Recorre las filas 1 a 1
		var celdas = $(filas[i]).find("td"); //devolverá las celdas de una fila
		codigo = $(celdas[0]).text();
		descripcion= $(celdas[1]).text();
		costo_base = $($(celdas[2]).children("input")[0]).val();
    margen_compra = $($(celdas[3]).children("input")[0]).val();
    impuesto = $($(celdas[4]).children("input")[0]).val();
		
    resultado += codigo+" - "+descripcion+" - "+costo_base+" - "+margen_compra+" - "+impuesto+"\n";
	}
	
	alert(resultado)
  }
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Recorrer tabla</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<button type="button" onclick="resultado();">Recorrer tabla</button>

<div class="tab-pane" id="2a">
        <div class="col-lg-12 col-sm-6 col-xs-3">
            <table class="table table-striped">
                <thead>
                    <th>Codigo Barra</th>
                    <th>Producto</th>
                    <th>Costo Base</th>
                    <th>Margen % Compra</th>        
                    <th>% Impuesto</th>
                    <th>P.F Actual</th>
                    <th>Precio Base Compra</th>
                    <th>P.F Compra</th>
                    <th>Accion</th>
                </thead>
                <tbody id="ajuste">     
                        <tr class="success">
                            <td>00001</td>
                            <td>Detalle producto 1</td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="2.00" readonly >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="2.00" readonly >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="0.30" readonly >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="2.00" readonly >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="2.00" readonly >
                            </td>

                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="2.00" readonly >
                            </td>

                            <td >   
                                <button id="{{$detalle->id}}" name="{{$detalle->id}}" type="button" class="btn btn-success btn">Guardar</button>
                            </td>
                        </tr>
						
						<tr class="success">
                            <td>00002</td>
                            <td>Detalle producto 2</td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="3.00" readonly >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="3.00" readonly >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="0.25" readonly >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="3.00" readonly >
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="3.00" readonly >
                            </td>

                            <td>
                                <input type="number" step="0.01" min="0" class="form-control" value="3.00" readonly >
                            </td>

                            <td >   
                                <button id="{{$detalle->id}}" name="{{$detalle->id}}" type="button" class="btn btn-success btn">Guardar</button>
                            </td>
                        </tr>
						
						
                                        
                </tbody>
            </table>            
        </div>
    </div>

</div>
 
 
</body>
</html>
    
answered by 08.02.2018 в 22:32