Table_exaple Hola,

Necesito algo de ayuda.

Mi problema es que no puedo averiguar cómo hacer esto. El punto completo de mi sencillo proyecto es crear una tabla solo con cuadros de texto de entrada donde solo se agregarán enteros, y solo necesito sumar columnas.

A medida que la suma de la cantidad me refiero a calcular toda la columna y por suma calculada, necesito calcular la cantidad * valor del encabezado.

Por ejemplo: la cantidad de columna 5 $ es 50, por lo que la celda calculada debe ser de 250 $.

También me gustaría agregar un botón que agregue las columnas dinámicamente y el encabezado es personalizado ... así que de alguna manera el valor de encabezado también debe guardarse como una variable.

Intenté algo con jQuery, pero no es relevante porque quiero que sea calculado dinámicamente, sin importar qué información entero en el encabezado.

Aquí está mi mal jQuery para cada columna, funciona, pero eso no es el objetivo.

$(document).ready(function() {
  $(".txt").each(function() {
    $(this).keyup(function() {
      calculateSum();
    });
  });
});

function calculateSum() {
  var sum = 0;
  $(".txt").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum").html(sum);
  $("#calc").html(sum);
}

$(document).ready(function() {
  $(".txt1").each(function() {
    $(this).keyup(function() {
      calculateSum1();
    });
  });
});

function calculateSum1() {
  var sum = 0;
  $(".txt1").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum1").html(sum);
  $("#calc1").html(sum *= 2);
}

$(document).ready(function() {
  $(".txt2").each(function() {
    $(this).keyup(function() {
      calculateSum2();
    });
  });
});

function calculateSum2() {
  var sum = 0;
  $(".txt2").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum2").html(sum);
  $("#calc2").html(sum *= 3);
}

$(document).ready(function() {
  $(".txt3").each(function() {
    $(this).keyup(function() {
      calculateSum3();
    });
  });
});

function calculateSum3() {
  var sum = 0;
  $(".txt3").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum3").html(sum);
  $("#calc3").html(sum *= 5);
}

$(document).ready(function() {
  $(".txt4").each(function() {
    $(this).keyup(function() {
      calculateSum4();
    });
  });
});

function calculateSum4() {
  var sum = 0;
  $(".txt4").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum4").html(sum);
  $("#calc4").html(sum *= 10);
}

$(document).ready(function() {
  $(".txt5").each(function() {
    $(this).keyup(function() {
      calculateSum5();
    });
  });
});

function calculateSum5() {
  var sum = 0;
  $(".txt5").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum5").html(sum);
  $("#calc5").html(sum *= 20);
}
.tftable {
  font-size: 12px;
  color: #333333;
  width: 70%;
  margin-right: 15%;
  margin-left: 15%;
  border-width: 1px;
  border-color: #a9a9a9;
  border-collapse: collapse;
}

.tftable th {
  font-size: 12px;
  background-color: #6382c59a;
  border-width: 1px;
  padding: 18px;
  border-style: solid;
  border-color: #474747;
  text-align: left;
}

.tftable tr {
  background-color: #ffffff;
}

.tftable td {
  font-size: 12px;
  border-width: 2px;
  padding: 5px;
  border-style: solid;
  border-color: #a9a9a9;
}

.tftable td:nth-child(2n+2) {
  background: #CCC;
}

.tftable tr td input {
  height: 100%;
  background: none;
}

.tftable tr th {
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.tftable tr td {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 15rem;
}

.tftable tr td input {
  border: none;
  text-align: center;
  padding: 0.7rem;
  width: 78%;
}

.button {
  padding: 7px 15px;
  text-align: center;
  color: #fff;
  background-color: #04AA6D;
  border: none;
  border-radius: 5px;
}

.button:hover {
  background-color: #3e8e41;
}

.button:active {
  background-color: #3e8e41;
  transform: scale(1.03);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<table id="tbl" class="tftable" border="1">
  <tr>
    <button class="button" onclick="addColumn()">Add Column</button>
    <th>Types</th>
    <th>1 $</th>
    <th>2 $</th>
    <th>3 $</th>
    <th>5 $</th>
    <th>10 $</th>
    <th>20 $</th>
  </tr>

  <tr>
    <td>Type 1</td>
    <td><input type="text" class="txt" name="txt" id="1"></td>
    <td><input type="text" class="txt1" name="txt" id="2"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 2</td>
    <td><input type="text" class="txt" name="txt" id="1"></td>
    <td><input type="text" class="txt1" name="txt" id="2"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 3</td>
    <td><input type="text" class="txt" name="txt" id="1"></td>
    <td><input type="text" class="txt1" name="txt" id="2"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 4</td>
    <td><input type="text" class="txt" name="txt" id="1"></td>
    <td><input type="text" class="txt1" name="txt" id="2"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 5</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 6</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 7</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 8</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 9</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 10</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr style="border-top: 5px solid black">
    <td>Quantity</td>
    <td><span id="sum"></span></td>
    <td><span id="sum1"></span></td>
    <td><span id="sum2"></span></td>
    <td><span id="sum3"></span></td>
    <td><span id="sum4"></span></td>
    <td><span id="sum5"></span></td>
  </tr>
  
    <td>Calculated</td>
    <td><span id="calc"></span></td>
    <td><span id="calc1"></span></td>
    <td><span id="calc2"></span></td>
    <td><span id="calc3"></span></td>
    <td><span id="calc4"></span></td>
    <td><span id="calc5"></span></td>
  </tr>
</table>
2
Atanas Andonov 8 jun. 2021 a las 12:38

2 respuestas

La mejor respuesta

El patrón que estás buscando para seguir se llama 'No repitaste', o seco. El principio básico es crear estructuras genéricas reutilizables que no contengan identificadores, sino simplemente cualquier metadato requerido para su procesamiento.

En este caso, puede proporcionar todos los elementos input con nombres de clases comunes, no incrementales ni id. Luego, en la JS, puede determinar qué columna está interactuando el usuario con el uso de index(). A partir de ahí, puede usar map() para construir una matriz de todos los valores en esa columna y sumarlos. Finalmente, puede almacenar el precio de la columna en un atributo data en el encabezado y multiplique la cantidad por esa cifra para brindarle su total calculado.

En la práctica se verá como la siguiente. Tenga en cuenta que este JS funcionará para un número infinito de filas y columnas, todo lo que depende del atributo data en el th para proporcionar el precio unitario.

jQuery($ => {
  $('.add-column').on('click', e => {
    console.log('addColumn() logic here...');
  });

  let $table = $('#tbl');

  $('.txt').on('input', e => {
    let tdIndex = $(e.target).closest('td').index();
    let colQuantities = $table.find(`tbody td:nth-child(${tdIndex + 1})`).map((i, td) => parseFloat($(td).find('input').val()) || null).get();
    let colSum = colQuantities.reduce((acc, cur) => acc + cur, 0);
    let colPrice = $table.find(`thead th:nth-child(${tdIndex + 1})`).data('price');

    $table.find(`tbody td:nth-child(${tdIndex + 1}) .sum`).text(colSum);
    $table.find(`tbody td:nth-child(${tdIndex + 1}) .calc`).text((colSum * colPrice).toLocaleString('en-US', {
      style: 'currency',
      currency: 'USD'
    }));
  });
});
input {
  width: 50px;
}

.quantity-row {
  border-top: 5px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button add-column">Add Column</button>

<table id="tbl" class="tftable" border="1">
  <thead>
    <tr>
      <th>Types</th>
      <th data-price="1">1 $</th>
      <th data-price="2">2 $</th>
      <th data-price="3">3 $</th>
      <th data-price="5">5 $</th>
      <th data-price="10">10 $</th>
      <th data-price="20">20 $</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Type 1</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 2</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 3</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 4</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 5</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 6</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 7</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 8</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 9</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 10</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr class="quantity-row">
      <td>Quantity</td>
      <td><span class="sum"></span></td>
      <td><span class="sum"></span></td>
      <td><span class="sum"></span></td>
      <td><span class="sum"></span></td>
      <td><span class="sum"></span></td>
      <td><span class="sum"></span></td>
    </tr>
    <tr>
      <td>Calculated</td>
      <td><span class="calc"></span></td>
      <td><span class="calc"></span></td>
      <td><span class="calc"></span></td>
      <td><span class="calc"></span></td>
      <td><span class="calc"></span></td>
      <td><span class="calc"></span></td>
    </tr>
  </tbody>
</table>

Las otras partes importantes a tener en cuenta aquí son que no necesita repetir el documento. Listo para cada bloque de código, puede colocar toda la lógica, lo que depende de él en un solo controlador.

Además, no deberías atribuir onclick u otros atributos onX como están desactualizados y ya no son buenas prácticas. Use los manejadores de eventos discretos en su lugar, como lo muestra el ejemplo anterior.

2
biberman 8 jun. 2021 a las 21:23

primero: El oyente $(document).ready() es necesario declarar los oyentes de eventos para las entradas. El resto del código puede estar afuera.


Cálculo

Tienes diez veces el mismo par de oyente y función de eventos. Al obtener el índice de la entrada que contiene celda con $(this).parent().index(), puede reducirlo a un solo par. Para el cálculo, debe llamar a la función calculateSum() con ese índice como parámetro.

En la función, debe obtener el valor de la celda principal de la columna para la multiplicación. Puede hacer esto seleccionando el th con el mismo índice y analice su innerHTML como un número.

let factor = parseFloat($("#tbl tr").first().find('th').eq(index).html());

Por último, puede usar el índice para seleccionar la columna con concatenación, por ejemplo: $("#sum" + index).

El resto funciona como en su código.


Agregar una columna

En la función addColumn(), primero tiene que obtener el valor de la nueva celda de la cabeza (aquí price). El resto de la función solo se ejecuta si el valor es verdadero (!!value / doble negación para convertir a un booleano), lo que significa que el usuario escribió en un valor.

Luego, debe obtener el número de entradas por fila, por ejemplo, desde la segunda fila:

const cell_count = $("#tbl tr").eq(2).find('input').length;

Y el número de filas de mesa, menos las dos últimas filas "Cantidad" y "calculadas":

const row_count = $("#tbl tr").length - 2;

Después de eso, debe agregar a cada fila de la tabla una nueva celda. El número de filas de tabla se usa para iterar sobre las filas con entradas y se usa el número de entradas por fila para hacer que las ID y las clases con concatenación.

Finalmente, debe redeclar los oyentes de eventos para las entradas, de modo que se consideren las nuevas entradas. Para eso, primero tienes que eliminar a los viejos oyentes y a los redeclarlos.

$(this).off('keyup').on('keyup', function() {...});

La forma más fácil es envolver la declaración en una función y llamar a esa función al final de calculateSum() (y en el oyente $(document).ready()).


Ejemplo de trabajo:

Debido a que el nombre y la identificación de las entradas no se usan, los quité por simplicidad. Cambié el var a let y const}.

function addColumn() {
  const price = prompt('Add the price for the new column (only digits):', '30');

  if (!!price) {
    const cell_count = $("#tbl tr").eq(2).find('input').length;
    const row_count = $("#tbl tr").length - 2;

    for (let i = 1; i < row_count; i++) {
      $("#tbl tr").eq(i).append(
        $('<td></td>').append(
          $('<input>').attr({
            type: 'text'
          }).addClass('txt' + cell_count)
        )
      );
    }

    $("#tbl tr").first().append(
      $('<th></th>').html(price + ' $')
    );
    $("#tbl tr:nth-last-child(2)").append(
      $('<td></td>').append(
        $('<span></span>').attr({
          id: ('sum' + cell_count)
        })
      )
    );
    $("#tbl tr:last-child").append(
      $('<td></td>').append(
        $('<span></span>').attr({
          id: ('calc' + cell_count)
        })
      )
    );
    addListeners();
  }
}

function calculateSum(index) {
  let factor = parseFloat($("#tbl tr").first().find('th').eq(index).html());
  let sum = 0;
  index = index == 1 ? '' : index - 1;

  $(".txt" + index).each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum" + index).html(sum);
  $("#calc" + index).html(sum * factor);
}

function addListeners() {
  $("#tbl input").each(function() {
    $(this).off('keyup');
    $(this).on('keyup', function() {
      calculateSum($(this).parent().index());
    });
  });
}

$(document).ready(addListeners);
.tftable {
  font-size: 12px;
  color: #333333;
  width: 70%;
  margin-right: 15%;
  margin-left: 15%;
  border-width: 1px;
  border-color: #a9a9a9;
  border-collapse: collapse;
}

.tftable th {
  font-size: 12px;
  background-color: #6382c59a;
  border-width: 1px;
  padding: 18px;
  border-style: solid;
  border-color: #474747;
  text-align: left;
}

.tftable tr {
  background-color: #ffffff;
}

.tftable td {
  font-size: 12px;
  border-width: 2px;
  padding: 5px;
  border-style: solid;
  border-color: #a9a9a9;
}

.tftable td:nth-child(2n+2) {
  background: #CCC;
}

.tftable tr td input {
  height: 100%;
  background: none;
}

.tftable tr th {
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.tftable tr td {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 15rem;
}

.tftable tr td input {
  border: none;
  text-align: center;
  padding: 0.7rem;
  width: 78%;
}

.button {
  padding: 7px 15px;
  text-align: center;
  color: #fff;
  background-color: #04AA6D;
  border: none;
  border-radius: 5px;
}

.button:hover {
  background-color: #3e8e41;
}

.button:active {
  background-color: #3e8e41;
  transform: scale(1.03);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="add_column" class="button" onclick="addColumn()">Add Column</button>

<table id="tbl" class="tftable" border="1">
  <tr>
    <th>Types</th>
    <th>1 $</th>
    <th>2 $</th>
    <th>3 $</th>
    <th>5 $</th>
    <th>10 $</th>
    <th>20 $</th>
  </tr>

  <tr>
    <td>Type 1</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 2</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 3</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 4</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 5</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 6</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 7</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 8</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 9</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 10</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr style="border-top: 5px solid black">
    <td>Quantity</td>
    <td><span id="sum"></span></td>
    <td><span id="sum1"></span></td>
    <td><span id="sum2"></span></td>
    <td><span id="sum3"></span></td>
    <td><span id="sum4"></span></td>
    <td><span id="sum5"></span></td>
  </tr>
  <tr>
    <td>Calculated</td>
    <td><span id="calc"></span></td>
    <td><span id="calc1"></span></td>
    <td><span id="calc2"></span></td>
    <td><span id="calc3"></span></td>
    <td><span id="calc4"></span></td>
    <td><span id="calc5"></span></td>
  </tr>
</table>
1
biberman 8 jun. 2021 a las 21:25