0

buenas tardes estoy intentado llenar una tabla a partir de un formulario con java script pero no para la cuando creo una celda con insertCell y quiero asignarle el valor de un campo de mi formulario no funciona. No se que estoy haciendo mal

formulario.addEventListener('submit', (e) => {
  var table = document.getElementById("detalles_venta");
  var row = table.insertRow(0);
  var celda1 = row.insertCell(0);
  var celda2 = row.insertCell(1);
  var celda3 = row.insertCell(2);
  var celda4 = row.insertCell(3);
  var celda5 = row.insertCell(3);
  var celda6 = row.insertCell(3);

  celda1.innerHTML(codigo.value);
  celda2.innerHTML(selectproducto.value);
  celda3.innerHTML(precio.value);
  celda4.innerHTML(cantidad.value);
  celda5.innerHTML(iva.value);
  celda6.innerHTML(total.value);
});
<table class="table table-hover" id="detalles_venta">
  <thead>
    <tr>
      <th>Producto</th>
      <th>Descripcion</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Iva</th>
      <th>Total</th>
      <th>Accion</th>
    </tr>
  </thead>
  <tbody>
    <tr>

    </tr>
  </tbody>

</table>

3
  • ¿Puedes agregar tu formulario?
    – FranAcuna
    el 22 mar. 2021 a las 22:03
  • ¿Estas usando Jquery? el 22 mar. 2021 a las 22:59
  • De donde sale el formulario?
    – AQMR
    el 23 mar. 2021 a las 11:06

2 respuestas 2

0

remito mi formulario

             <form action="" method="POST" id="formulario_compras" >
                 <div class="form-group row">
                    <label for="" class="col-4 col-form-label">Producto</label>
                    
                    <select class="combobox form-control col-4 " name="codigo_producto" id="codigo_producto">
                                               
                    </select> 
                </div>    
                 
                 <div class="form-group row">
                     <label  class="col-4 col-form-label">Codigo</label>
                     <input type="text" class="form-control col-4" id="codigo"  disabled> 
                 </div>
                 <div class="form-group row">
                     <label  class="col-4 col-form-label">Precio</label>
                     <input type="text" class="form-control col-4" id="precio"  disabled> 
                 </div>           
                <div class="form-group row">
                     <label  class="col-4 col-form-label ">Cantidad</label>
                     <input type="number"  class="form-control col-4" id="cantidad"> 
                 </div> 
                   <div class="form-group row">
                     <label class="col-4 col-form-label">Iva</label>
                     <input type="number"  class="form-control col-4" id="iva" disabled >
                 </div> 
                 <div class="form-group row">
                     <label class="col-4 col-form-label">Total</label>
                     <input type="number"  class="form-control col-4" id="total" disabled >
                 </div> 
                 
                    <input class="boton offset-md-4" type="submit" name="accion" value="ACEPTAR">                                      
                                                        
                 
             </form>
-2

le voy a dejar un ejemplo mucho la estructurado, utiliza Jquery en la cual utilizar la funcion append

$(document).on('click', '#add', function() {
var data = 'todos'
var data2 = 'todas'

  $('#postTable').append("<tr><td class='col1'>" + data + "</td>"+
  "<td class='col1'>" + data2 + "</td>"+

 "</tr>")

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="massshow-modal btn btn-success" id="add"> Añadir</button>
<table class="table table-striped table-bordered table-hover compact nowrap" id="postTable">
   <tr>
       <td>ID</td>
       <td>ID2</td>
   </tr>
</table>

1
  • Pero si no pone la etiqueta jquery, solo pone javascript
    – AQMR
    el 23 mar. 2021 a las 11:04

Tu Respuesta

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

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