Calculating table quantity and multiplication

Question

I need some help.

My problem is that I can't figure out how to do this. The whole point of my simple project is to create a table only with input text boxes where only integers will be added, and I need to sum columns only.

As Quantity sum I mean to calculate the whole column and by Calculated sum I need to calculate the Quantity * value of the Heading.

For example: Quantity of column 5$ is 50 therefore the calculated cell must be 250$.

I would also like to add a button that adds columns dynamically and the heading is Custom... so somehow the heading value should be saved as a variable too.

I tried something with jQuery, but it's not relevant because I want that to be calculated dynamically no matter what input I enter in the heading.

Here is my bad jQuery for each column, it works, but that's not the goal.

$(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);
}

user_519413 · Answer

The pattern you're looking to follow is called 'Don't Repeat Yourself', or DRY. It's core principle is to create reusable generic structures which do not contain identifiers, but simply any metadata required for processing.

In this case you can provide all the input elements with common class names, not incremental ones nor id. Then in the JS you can determine which column the user is interacting with using index(). From there you can use map() to build an array of all the values in that column and sum them. Finally you can store the column price in a data attribute on the heading and multiply the quantity by that figure to give you your calculated total.

In practice it will look something like the below. Note that this JS will work for an infinite number of rows and columns, all it depends on is the data attribute on the th in order to provide the unit price.

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;
}

The other important parts to note here are that you do not need to repeat document.ready handlers for each block of code, you can place all logic which depends on it in a single handler.

In addition, you should not us onclick or other onX attributes as they are outdated and no longer good practice. Use unobtrusive event handlers instead, as the example above shows.

user_15377355 · Answer

First: The $(document).ready() listener is only necessary to declare the event listeners for the inputs. The rest of the code can be outside.

Calculation

You have ten times the same pair of event listener and function. By getting the index of the input containing cell with $(this).parent().index() you can reduce it to only one pair. For the calculation you have to call the function calculateSum() with that index as parameter.

In the function you have to get the value of the head cell of the column for the multiplication. You can do this by selecting the th with the same index and parse its innerHTML as a number.

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

Last you can use the index to select the column with concatenation, for example: $("#sum" + index).

The rest works like in your code.

Adding a column

I recommend to not use an inline event listener in your button and instead declare it in the script. The function addColumn() would be the anonymous function of the listener:

$('#add_column').click(function() {...});

In that function you first have to get the value of the new head cell (here price). The rest of the function is only executed if the value is true (!!price / double negation for converting to a boolean), which means the user typed in a value.

Then you have to get the number of inputs per row, for example from the second row:

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

and the number of table rows, minus the last two rows "Quantity" and "Calculated":

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

After that you have to add to each table row a new cell. The number of table rows is used to iterate over the rows with inputs and the number of inputs per row is used for making the ids and classes with concatenation.

Finally you need to redeclare the event listeners for the inputs, so that the new inputs are considered. For that you first have to remove the old listeners and than redeclare them.

$("#tbl input").off('keyup').on('keyup', function() {...});

Working example:

Because name and id of the inputs aren't used i removed them for simplicity. I changed the outdated var to let and const.

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);
}

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



$('#add_column').click(function() {

  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(
        $('').append(
          $('').attr({
            type: 'text'
          }).addClass('txt' + cell_count)
        )
      );
    }

    $("#tbl tr").first().append(
      $('').html(price + ' $')
    );

    $("#tbl tr:nth-last-child(2)").append(
      $('').append(
        $('').attr({
          id: ('sum' + cell_count)
        })
      )
    );

    $("#tbl tr:last-child").append(
      $('').append(
        $('').attr({
          id: ('calc' + cell_count)
        })
      )
    );

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

  }

});

.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);
}

Calculating table quantity and multiplication

2 Answers

Calculation

Adding a column

Working example: