1

Estoy haciendo una aplicación para cargar productos con bootstrap y jquery, ya hice la función para que cargue la información de los inputs dentro de un .append, lo que pasa es que al momento de cargar los datos se me van acumulando de manera repetitiva y me desarman la estructura.

¿Alguno sabe como podría solucionar este problema y se carguen los productos de manera separada como en la foto?

introducir la descripción de la imagen aquí

Adjunto el código para se entienda mejor:

function suma(){
	var especie;
	var cantidad;
	var precio;
	var total;
	especie = document.getElementById('especie').value;
	cantidad = document.getElementById('cant').value;
	precio = document.getElementById('compra').value;
	total = cantidad*precio;
  	document.getElementById('subtotal').value = total;

  	if(total > 0){

  	
  	$(".parrafo").innerHTML ="<p>Su cartera contiene los siguientes elementos:</p>";

  	$(".cuadro").append(
  		"<p class='col'>Especie</p><p class='col'>Cantidad</p><p class='col'>Precio($)</p><p class='col'>Total($)</p><p class='col'>Acción</p>")



  	$(".cuadro2").append(
  		"<p class='col'>"+especie+"</p><p class='col'>"+cantidad+"</p><p class='col'>"+precio+"</p><p class='col'>"+total+"</p><input type='button' class='btn btn-danger' value='-' onclick='borrar()' >")
  	




  	}
   	
  	};

function borrar(){
		$("p").remove("");
		$(".cuadro2").remove("input")
};
*{
    margin: 0px;
    padding: 0px;
}


.container{
	height: 400px;
	width: auto;
	
}

.ct1{
	padding: 0 20px;
	text-transform: uppercase;
	font-weight: bold;
	
}

.ct2{
	
}

.cuadro{
	margin-top: 50px;
	background-color: blue;
	color: white;
}

.cuadro2{
	background-color: white;
	color: black;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Movizen Bootstrap</title>
	<link rel="stylesheet" type="text/css" href="estilos.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script type="text/javascript" src="main.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>

	<div class="container bg-primary">
  		<div class="row text-white ct1">
    		<div class="col">Especie</div>
    		<div class="col">Cantidad</div>
    		<div class="col">Precio($)</div>
    		<div class="col">Total($)</div>
  		</div>

  		<div class="row ct2">
  			<input class="col" type="text" id="especie" placeholder="Especie">
  			<input class="col"type="text" id="cant" placeholder="Cantidad">
  			<input class="col" type="text" id="compra" placeholder="Precio compra">
  			<input class="col" type="text" id="subtotal" placeholder="Total" disabled>
  			<input type="button" class="btn btn-success" placeholder="Total" onclick="suma()" id="sum" value="+" />
  		</div>
  		<p class="parrafo"></p>
  		<div class="row cuadro">
  			
  		</div>

  		<div class="row cuadro2">
	</div>




</body>
</html>

1 respuesta 1

0

Te muestro el codigo corregido para hacer lo que pides, en el hay unos pequeños comentarios explicando el por qué

function suma(){
  var especie;
  var cantidad;
  var precio;
  var total;
  especie = document.getElementById('especie').value;
  cantidad = document.getElementById('cant').value;
  precio = document.getElementById('compra').value;
  total = cantidad*precio;
  document.getElementById('subtotal').value = total;

  if(total > 0){
  
  	// Las lineas encargadas de añadir texto al encabezado de la tabla han sido movidas al html, ya que solamentes necesario mostrarlas. Antes se estaban cargando una y otra vez, cosa que no era necesaria y rompia la estructura
    
    // Añadiendo numeros a la clase "col" podemos definir el numero de columnas que ocura, al sumar estas 12, ocuparan una linea entera

    $(".cuadro2").append(`
      <p class='col-3'>${especie}</p>
      <p class='col-2'>${cantidad}</p>
      <p class='col-2'>${precio}</p>
      <p class='col-3'>${total}</p>
      <p class="col-2"><input type='button' class='btn btn-danger' value='-' onclick='borrar()' ></p>
		`)

  }
  
  // Muestro u oculto el encabezado de la tabla dependiende de si esta vacia o no

  if ($('.cuadro2').children().length) {

    $(".parrafo").show()

    $(".cuadro").show()


  } else {

    $(".parrafo").hide()

    $(".cuadro").hide()

  }

};

function borrar(){
  $("p").remove("");
  $(".cuadro2").remove("input")
};
*{
  margin: 0px;
  padding: 0px;
}


.container{
  height: 400px;
  width: auto;

}

.ct1{
  padding: 0 20px;
  text-transform: uppercase;
  font-weight: bold;

}

.ct2{

}

.cuadro{
  margin-top: 50px;
  background-color: blue;
  color: white;
}

.cuadro2{
  background-color: white;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Movizen Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="estilos.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script type="text/javascript" src="main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>

    <div class="container bg-primary">

      <div class="row text-white ct1">
        <div class="col">Especie</div>
        <div class="col">Cantidad</div>
        <div class="col">Precio($)</div>
        <div class="col">Total($)</div>
      </div>

      <div class="row ct2">
        <input class="col" type="text" id="especie" placeholder="Especie">
        <input class="col"type="text" id="cant" placeholder="Cantidad">
        <input class="col" type="text" id="compra" placeholder="Precio compra">
        <input class="col" type="text" id="subtotal" placeholder="Total" disabled>
        <input type="button" class="btn btn-success" placeholder="Total" onclick="suma()" id="sum" value="+" />
      </div>

      <p class="parrafo" style="display: none;">Su cartera contiene los siguientes elementos:</p>

      <div class="row cuadro" style="display: none;">
        <p class='col-3'>Especie</p>
        <p class='col-2'>Cantidad</p>
        <p class='col-2'>Precio($)</p>
        <p class='col-3'>Total($)</p>
        <p class='col-2'>Acción</p>
      </div>

      <div class="cuadro2 row"></div>

    </div>

  </body>
</html>

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.