Automatic display keyed value in a dynamic table row using javascript, angular js and html

Question

I am creating a list that /reducesadds table rows using javascript. I would love to show the cost once inserted. The code is displaying expression name but not value keyed in. The desired result is when user types 5 it displays 5 taking into consideration of dynamic input. I am creating a list that /reducesadds table rows using javascript. I would love to show the cost once inserted. The code is displaying expression name but not value keyed in. The desired result is when user types 5 it displays 5 taking into consideration of dynamic input

     <div class="col-sm-12">
       
         <form method="POST">
       <table class="table" id="myTa">
           <thead>
               <tr>
                   
                   <th>Details</th>
                   <th>Quantity</th>
                   <th>Unit cost</th>
                   <th>Total cost</th>
                   
                   
                   
               </tr>
           </thead>
          
       </table>
       
       <br>
       <button class="btn btn-success" onclick="add()" type="button">+ Add</button>
       <button class="btn btn-danger" onclick="remove()" type="button">- Del</button>
       
       <p  id="demo"></p>
       
   <script>
     var n=1;
     var o=1;
   function remove()
   {
       var m = n-2;
       var x = document.getElementById("myTa").rows.length-2;
       var y = document.getElementById("myTa").rows.length-2;
       var g = document.getElementById("myTa").rows.length-2;
       var v = document.getElementById("myTa").rows.length-2;
       var k = document.getElementById("myTa").rows.length-2;
       document.getElementById("myTa").deleteRow(-1);
   document.getElementById("demo").innerHTML = "<input name='total' value='" + x + "' 
  type='number' hidden/>";
   }
     
       function add()
       {
           var x = document.getElementById("myTa").rows.length;
           var y = document.getElementById("myTa").rows.length;
           var g = document.getElementById("myTa").rows.length;
           var v = document.getElementById("myTa").rows.length;
           var k = document.getElementById("myTa").rows.length;
           var kk = document.getElementById("myTa").rows.length;
           var ll = document.getElementById("myTa").rows.length;
           var mm = document.getElementById("myTa").rows.length;
           var nn = document.getElementById("myTa").rows.length;
            var oo = document.getElementById("myTa").rows.length;
           var pp = document.getElementById("myTa").rows.length;
            var qq = document.getElementById("myTa").rows.length;
           
   document.getElementById("demo").innerHTML = "<input name='total' value='" + x + "' 
type='number' hidden/>";
var table = document.getElementById("myTa");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
 var cell2 = row.insertCell(1);
 var cell3 = row.insertCell(2);
 var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);


cell1.innerHTML =  "<textarea class='form-control' name='details"+ v++ +"' required>. 
</textarea>";
cell2.innerHTML =  "<input type='number' class='form-control' data-ng- 
model='quantity"+ oo++ +"'  name='quantity"+ k++ +"' required/>";
cell3.innerHTML =  "<input type='number' class='form-control' name='unit"+ g++ +"' 
required/>";
cell4.innerHTML =  "<p> {{quantity"+ nn++ +"}}</p>";



       }
       
   </script>
   </form>
     </div>  
   </div>
   </div>

I am creating a list that /reducesadds table rows using javascript. I would love to show the cost once inserted. The code is displaying expression name but not value keyed in. The desired result is when user types 5 it displays 5 taking into consideration of dynamic input

Kinglish · Accepted Answer · 2022-02-01 19:41:14Z

1

Here's the thing: AngularJS doesn't work this way and trying to edit the DOM directly like this can lead to many issues down the road. However, when you learn the angular way of doing this, you'll never look back. It's much easier.

In essence, you have a view (table) which will be generated from data (an array). To add rows or subtract rows is as simple as adding or subtracting rows from your array. Here's a quick demo, showing one way to go about it, getting totals as well.

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.tableData = [{
        details: "Here are some details...",
        quantity: 5,
        unit_cost: 14.99
      },
      {
        details: "Here are some details2...",
        quantity: 2,
        unit_cost: 4.99
      },
      {
        details: "Here are some details3...",
        quantity: 1,
        unit_cost: 44.99
      },
      {
        details: "Here are some details4...",
        quantity: 0,
        unit_cost: 104.99
      }
    ];

    $scope.getTotal = function() {
      return $scope.tableData.reduce((b, a) => {
        b += a.unit_cost * a.quantity;
        return b;
      }, 0).toFixed(2)
    }

    $scope.add = function() {
      let blankRow = {
        details: "",
        quantity: "",
        unit_cost: ""
      }
      $scope.tableData.push(blankRow)
    };


    $scope.remove = function(index) {
      $scope.tableData.splice(index, 1);
    };


  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <form method="POST">
    <table class="table">
      <thead>
        <tr>
          <th>Details</th>
          <th>Quantity</th>
          <th>Unit cost</th>
          <th>Total cost</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='i in tableData'>
          <td>
            <textarea class='form-control' ng-model="i.details" name="details_{{$index}}" required></textarea>
          </td>
          <td>
            <input type='number' name="quantity_{{$index}}"  class='form-control' ng-model='i.quantity' required/>
          </td>

          <td>
            <input type='number' name="unit_cost_{{$index}}"  class='form-control' ng-model='i.unit_cost' required/>
          </td>

          <td>
            ${{(i.unit_cost * i.quantity).toFixed(2)}}
          </td>
          <td>
            <button class="btn btn-danger" ng-click="remove($index)" type="button">- Del</button>
          </td>
        </tr>
      </tbody>
    </table>
    <hr>
    <button class="btn btn-success" ng-click="add()" type="button">+ Add</button>
    <hr>
    <p> Total:  ${{getTotal()}}</p>
  </form>
</div>

edited Feb 1, 2022 at 19:41

answered Feb 1, 2022 at 0:42

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vincent Omondi Over a year ago

Thank you. How do I add in a dynamic name attribute?

Vincent Omondi Over a year ago

how do i add in dynamic attribute name?

Kinglish Over a year ago

I can show that. Does each row have an ID? Do you want to actually POST the form - or use ajax?

Vincent Omondi Over a year ago

I would love to post the form.

Kinglish Over a year ago

Ok, I added dynamic name fields. Was that what you had in mind?

|

Collectives™ on Stack Overflow

Automatic display keyed value in a dynamic table row using javascript, angular js and html

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related