How to paint inputs and text according to units of a product?

Question

How to paint inputs and text according to units of a product?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I am making an application type inventory that according to a purchase invoice can consult the products related to that invoice and can add an input and a button to send certain information to the BD of each product of the invoice. If, for example, there are 5 cans of flavor milk in the invoice, how can I make 5 rows with the text Milk of flavor appear, since each product is individual?

What I have managed to do is that by making an html table add up the total number of products, and according to that result, I draw an html table with that number of rows. What I do not know is how to show the texts.

my code to generate the table is

var suma = 0;
  $('#grillaArt tr').each(function() {
    suma += parseInt($(this).find('td').eq(1).text() || 0, 10)
  })

  jQuery = $;
  jQuery("#generaTabla").hide().fadeIn("Slow");

  var NroFila = suma;
  var Cantidad = NroFila * NroFila + 1;
  var valor = Cantidad * 1300;


  jQuery('#tblTabla tr').next().remove();
  var a = 0;

  for (var x = 0; x < NroFila; x++) {
    Cantidad = Cantidad + x;
    valor = valor * Cantidad;
    a = a + 1;
    jQuery('#tblTabla tr:last').after('<tr>' +
      '<td align="left">' + a + '</td>' +
      '<td align="left">' + Cantidad + '</td>' +
      '<td align="left">' + valor + '</td>' +
      '<td align="center"><button>Agregar</button></td></tr>'
    );
  }

  jQuery('#tblTabla tr:odd').css('background-color', '#E9F0F8');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="generaTabla" style="display: none">
  <table cellspacing="0" cellpadding="4" border="0" id="tblTabla" style="color: #333333; width: 100%; border-collapse: collapse;">
    <tr style="color: White; background-color: #5D7B9D; font-weight: bold;">
      <th align="left">Nro</th>
      <th align="left">Cantidad</th>
      <th align="left">Valor</th>
      <th style="text-align:center">Agregar</th>
    </tr>
  </table>
</div>

javascript jquery html

asked by Ivxn 15.06.2016 в 00:37

source

2 answers

0

I already solved the problem, I go through my table row x row ($ ('# grillaArt tr'). each), from the column quantity of my HTML table, I obtain and I keep the numerical value and the text of the product that are in td 1 and 2, in the variables sum and value_ga, then I generate an html table with Jquery and add a for cycle to draw the rows with their respective texts and the code below is the complete source code of the table that I wanted perform =)

$('#grillaArt tr').each(function () { //filas con clase 'dato', especifica una clase, asi no tomas el nombre de las columnas
    sum = parseInt($(this).find('td').eq(1).text());
    valorga = $(this).find('td').eq(2).text();

    jQuery = $;
    jQuery("#generaTabla1").hide().fadeIn("Slow");

    for (var j = 0; j < sum; j++) {
        contador = contador + 1;
        jQuery('#tblTabla1 tr:last').after('<tr>' +
        '<td align="left">' + contador + '</td>' +
        '<td align="left">' + valor_ga + '</td>' +
        '<td align="left"></td>' +
        '<td align="center"><button>Agregar</button></td></tr>'
        );
    }
});

answered by 15.06.2016 в 17:12

How can I make several consecutive requests if the previous one did not give me results in angularjs java.lang.IndexOutOfBoundsException: Index: 0, Size: 0 JSF

score 1 · Accepted Answer

Ivxn; Here I leave a code that could also solve your situation, this option is developed without Jquery, is native.

You can adapt it to your needs. Success in your code.

var a = document.querySelectorAll("#origen tbody tr"); // Buscamos la tabla que contiene los datos como origen
if(a!= undefined || a != null){
  var cc = 1; //Este será un contador que controlara los registros de la tabla destino
  var fila = ""; //Iniciamos una variable que indudablemente será una fila; TR
  for(var b in a){ //Iteramos los datos que nos entrego el querySelectorAll.
    var c = a[b];
    
    if(typeof c == "object"){ //Solo nos important los objetos
      var limite = c.children[1].textContent; //Accesamos al número 12 que es la cantidad.
      for(var x=0;x<limite;x++){//Hacemos un ciclo de la cantidad
        //A continuación vamos a crear nuestra fila con la variable; fila
        fila += "<tr><td>"+(cc)+"</td><td>"+(x+1)+"</td><td>"+c.children[2].textContent+"</td><td><button>Agregar</button></td></tr>";
        cc++;
      }
    }
  }
  var t = document.querySelector("#destino tbody"); //Ahora buscamos la tabla destino
  if(t != undefined || t != null){
    t.innerHTML = fila; //Le agregamos los datos de la fila.
  }
}

<table id="origen">
  <thead>
    <tr>
        <th>Factura</th>
        <th>Cantidad</th>
        <th>Articulo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>004</td>
      <td>12</td>
      <td>Lecha Blanca</td>
    </tr>
    <tr>
      <td>004</td>
      <td>12</td>
      <td>Leche Sabor</td>
    </tr>
  </tbody>
</table>
<hr/>
<table id="destino">
  <thead><tr><th>No</th><th>Cantidad</th><th>Valor</th><th>Agregar</th></tr></thead>
  <tbody></tbody>
</table>