'I need to select a specific column in a table, add the VAT rate and display the result in the next column

so I created an dynamic HTML table, in which you can add, deleate or edit columns. I added a functionality that adds all the prices from the "pret" columns and shows it below. I need now, when I add or edit the rows, to automaticly select the "price" column and add the VAT rate (19%) and to show the result in the "pret+TVA" column.

when you press on the add row button, it adds a row below the row and when ever you press the "calculate the total price" it displays the sum of all the prices in the third row.

I added the function below which is supposed to select the specific cell and add to its value the rate and then display the result in the next cell.

function tvaCalc() {
  var pretNormal = document.getElementById("table").rows.cells[4];
  pretNormal = parseFloat(pretNormal);
  var tvaPrice = pretNormal * 1.9;
  document.getElementById("table").rows.cells[4].innerHTML = pretNormal;

}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>

  <title>Oferta de pret</title>
</head>

<body>
  <section id="project">

    <div class="company-name">
      <p>SC DD AUTO GLITIA SRL</p>
      <p>GLITIA DANIEL</p>
    </div>

    <div class="offer ">
      <h1>Oferta de pret</h1>
    </div>

    <div class="container container-tabel">
      <table id="table" class="main-tabel">
        <tr>
          <th>article code</th>
          <th>article name</th>
          <th>Brand</th>
          <th>quantity.</th>
          <th>price</th>
          <th>price+VAT</th>
        </tr>

        <tr>
          <td>--</td>
          <td><b>Labour</b></td>
          <td>--</td>
          <td>--</td>
          <td>35</td>
          <td ></td>

        </tr>
        <tr>
          <td>--</td>
          <td><b>Total RON</b></td>
          <td>--</td>
          <td>--</td>
          <td id="total">0</td>
          <td >--</td>

        </tr>
      </table>

    </div>

  </section>

  <section id="navigation">
    <div class="imputs">
      <input type="text" id="cod-articol" class="d-print-none inputField" placeholder="Cod articol" name="article-code" value="" required>
      <input type="text" id="nume-articol" class="d-print-none inputField" placeholder="Nume articol" name="article-name" value="" required>
      <input type="text" id="marca" class="d-print-none inputField" placeholder="marca" name="brand" value="" required>
      <input type="text" id="cant" class="d-print-none inputField" placeholder="Cant." name="Cant." value="" required>
      <input type="text" id="pret" class="d-print-none inputField" placeholder="Pret" name="Pret" value="" required>

    </div>

    <br>

    <div class="buttons">

      <button type="button" class="d-print-none btn btn-outline-secondary" onclick="addHtmlTableRow()">add row</button>
      <button type="button" class="d-print-none btn btn-outline-secondary" onclick="editHtmlTbleSelectedRow();">Edit</button>
      <button type="button" class="d-print-none btn btn-outline-secondary" onclick="removeSelectedRow();">delete row</button>
      <button type="button" class="d-print-none btn btn-outline-secondary" onclick="calculTotal();">calculate the total price</button>
    </div>
  </section>





  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


  <script></script>

</body>

</html>
javascripthtmlcssfunctiontwitter-bootstrap


Solution 1:[1]

I modified your table structure little bit to make it easy to work with. I've also modified your function a bit to also take care of the totals. You can just call it whenever you're updating the table's content. This worked for me

function tvaCalc() {
    let rows = document.querySelector('#table tbody').rows;
    let total = 0;

    for (let row of rows) {
        let price    = parseFloat(row.cells[4].textContent);
        var vatPrice = price * 1.19;

        row.cells[5].textContent = vatPrice;
        total += price;
    }

    document.getElementById('total').textContent = total;
}

tvaCalc()
<table id="table">
    <thead>
        <tr>
            <th>article code</th>
            <th>article name</th>
            <th>Brand</th>
            <th>quantity.</th>
            <th>price</th>
            <th>price+VAT</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>--</td>
            <td><b>Labour</b></td>
            <td>--</td>
            <td>--</td>
            <td>35</td>
            <td ></td>
        </tr>
        <tr>
            <td>--</td>
            <td><b>Labour</b></td>
            <td>--</td>
            <td>--</td>
            <td>37</td>
            <td ></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>--</td>
            <td><b>Total RON</b></td>
            <td>--</td>
            <td>--</td>
            <td id="total">0</td>
            <td >--</td>
        </tr>
    </tfoot>
</table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ruleboy21

Related Questions