Total a table - HTML / JavaScript

user_2690148 0
Viewed 90

Been poking around but having a hard time coming up with what I need. Given an HTML table, how would one subtotal across and then total at the bottom?

Specifically, I have this:

<table>
  <tr>
    <th>Admission Type</th>
    <th>Number of People</th>
    <th>Price</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>General (Adults & Children 13+)</td>
    <td><input type="number" class="quantity" id="adultTix" name="adultTix"
   min="0" max="10" value="0"></td>
    <td>$ 10</td>
    <td><label for="adultTot"></label></td>
  </tr>
  <tr>
    <td>Senior (Ages 55+)</td>
    <td><input type="number" class="quantity" id="seniorTix" name="seniorTix"
   min="0" max="10" value="0"></td>
    <td>$  7</td>
    <td></td>
  </tr>
  <tr>
    <td>Children (Ages 5-12)</td>
    <td><input type="number" class="quantity" id="kidsTix" name="kidsTix"
   min="0" max="10" value="0"></td>
    <td>$  7</td>
    <td></td>
  </tr>
  <tr>
    <td>Children (Under 5)</td>
    <td><input type="number" class="quantity" id="freeTix" name="freeTix"
   min="0" max="10" value="0"></td>
    <td>$  0</td>
    <td></td>
  </tr>
</table>

And I want the "Total" column to update as the quantity changes and then I need another row that totals the "Total" column.

Thanks in advance for your help.

html javascript
2 Answers

You can attach a function to each input's onchange attribute that calculates the values each time:

const handleChange = () => {
 
  let total = 0;
  
  let types = [
    {label:"adult",cost:10,subText:'Adult'},
    {label:"senior",cost:7,subText:'Senior'},
    {label:"kids",cost:7,subText:'Kids'},
    {label:"free",cost:0,subText:'Under 5'}
  ];
  
  for(let i = 0; i < types.length; i ++) {
    let node = document.getElementById(`${types[i].label}Tix`);
    let quantity = node.value;
    let cost = quantity * types[i].cost;
    let subtotal = document.getElementById(`${types[i].label}Cost`);
    subtotal.textContent = `${types[i].subText} Subtotal: $${cost}`;
    
    total += cost; 
  }
 
  document.getElementById('totalCost').textContent = `Total Cost: $${total}`
}
<tr>
        <th>Admission Type</th>
        <th>Number of People</th>
        <th>Price</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>General (Adults & Children 13+)</td>
        <td><input type="number" onchange="handleChange()" class="quantity" id="adultTix" name="adultTix"
       min="0" max="10" value="0"></td>
        <td>$ 10</td>
        <td><label for="adultTot"></label></td>
      </tr>
      <tr>
        <td>Senior (Ages 55+)</td>
        <td><input type="number" onchange="handleChange()" class="quantity" id="seniorTix" name="seniorTix"
       min="0" max="10" value="0"></td>
        <td>$  7</td>
        <td></td>
      </tr>
      <tr>
        <td>Children (Ages 5-12)</td>
        <td><input type="number" onchange="handleChange()" class="quantity" id="kidsTix" name="kidsTix"
       min="0" max="10" value="0"></td>
        <td>$  7</td>
        <td></td>
      </tr>
      <tr>
        <td>Children (Under 5)</td>
        <td><input type="number" onchange="handleChange()" class="quantity" id="freeTix" name="freeTix"
       min="0" max="10" value="0"></td>
        <td>$  0</td>
        <td></td>
      </tr>
    </table>
<div id="adultCost">Adult Subtotal: $0</div>
<div id="seniorCost">Senior Subtotal: $0</div>
<div id="kidsCost">Kids Subtotal: $0</div>
<div id="freeCost">Under 5 Subtotal: $0</div>
<div id="totalCost">Total Cost: $0</div>
```

user_123646780

use the jquery library

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
    <body>
        <table border="1" id="table">
            <tr>
            <th>Admission Type</th>
            <th>Number of People</th>
            <th>Price</th>
            <th>Total</th>
            </tr>
            <tr>
                <td>
                    General (Adults & Children 13+)
                </td>
                <td>
                    <input type="number" class="quantity" id="adultTix" name="adultTix" min="0" max="10" value="0">
                </td>
                <td>
                    $ <label id="price_general">10</label>
                </td>
                <td>
                    <label id="adultTot">0</label>
                </td>
            </tr>
            <tr>
                <td>
                    Senior (Ages 55+)
                </td>
                <td>
                    <input type="number" class="quantity" id="seniorTix" name="seniorTix" min="0" max="10" value="0">
                </td>
                <td>
                    $  <label id="price_senior">7</label>
                </td>
                <td>
                    <label id="seniorTot">0</label>
                </td>
            </tr>
            <tr>
                <td>
                    Children (Ages 5-12)
                </td>
                <td>
                    <input type="number" class="quantity" id="kidsTix" name="kidsTix" min="0" max="10" value="0">
                </td>
                <td>
                    $  <label id="price_childre">7</label>
                </td>
                <td>
                    <label id="childreTot">0</label>
                </td>
            </tr>
            <tr>
                <td>
                    Children (Under 5)
                </td>
                <td>
                    <input type="number" class="quantity" id="freeTix" name="freeTix" min="0" max="10" value="0">
                </td>
                <td>
                    $  <label id="price_childre5">0</label>
                </td>
                <td>
                    <label id="childre5Tot">0</label>
                </td>
            </tr>
            <tr>
                <td colspan="3" style="text-align: right;">
                    Total
                </td>
                <td id="total">
                    0
                </td>
            </tr>
        </table>
        <script type="text/javascript">
            $(document).ready(function () {

                $("#table").on('change','#adultTix',function(){
                    let cant = $("#adultTix").val();
                    /* 
                     * with the function 'parseInt' convert the value to integer.
                    */
                    let total = (parseInt(cant))*(parseInt($("#price_general").text()));
                    $("#adultTot").html(total);

                    Totalprice();
                });

                $("#table").on('change','#seniorTix',function(){
                    let cant = $("#seniorTix").val();
                    let total = (parseInt(cant))*(parseInt($("#price_senior").text()));
                    $("#seniorTot").html(total);

                    Totalprice();
                });

                $("#table").on('change','#kidsTix',function(){
                    let cant = $("#kidsTix").val();
                    let total = (parseInt(cant))*(parseInt($("#price_childre").text()));
                    $("#childreTot").html(total);

                    Totalprice();
                });

                $("#table").on('change','#freeTix',function(){
                    let cant = $("#freeTix").val();
                    let total = (parseInt(cant))*(parseInt($("#price_childre5").text()));
                    $("#childre5Tot").html(total);

                    Totalprice();
                });
            });

            /* 
             * we get the total
            */
            function Totalprice(){
                $("#total").html((parseInt($("#adultTot").text()))+(parseInt($("#seniorTot").text()))+(parseInt($("#childreTot").text()))+(parseInt($("#childre5Tot").text())));
            }
        </script>
    </body>
</html>
user_135454860
Related