adding the rows in a table

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Sayantan Dutta
    New Member
    • Oct 2011
    • 2
    #1

    adding the rows in a table

    I have this piece of code, wherin I would like to add the "amount" col to SubTotal each time a row is added and delete the "amount" from SubTotal each time a row is deleted.
    Any help?

    Code:
    <html>
<head>
<script type="text/javascript">



function addRow(tableId, cells){
         var tableElem = document.getElementById(tableId);
         var newRow = tableElem.insertRow(tableElem.rows.length);
         var newCell;
        for (var i = 0; i < cells.length; i++) {
                newCell = newRow.insertCell(newRow.cells.length);
                newCell.innerHTML = cells[i];
        }
        return newRow;
}


function deleteRow(tableId, rowNumber){
        var tableElem1 = document.getElementById(tableId);
        if (rowNumber > 0 && rowNumber < tableElem1.rows.length) {
                tableElem1.deleteRow(rowNumber);
         } else {
          alert("Failed");
         }
}

</script>
</head>


<body>
<table id="tblPeople" border="1">
<tr>
 <th>Hour</th>
 <th>Rate</th>
 <th>Amount </th>
</tr>
</table>
<hr>
<form name="formName">
 Hour: <input type="text" name="Hour"><br>
 Rate: <input type="text" name="Rate"><br>
  <input type="hidden" name="amount" id="amount"><br>
  Subtotal:<input type="text" name="subtotal" id="subtotal"><br>
 <input type="button" value="Add Name"
  onclick="addRow('tblPeople',
   [this.form.Hour.value, this.form.Rate.value, this.form.Hour.value  * this.form.Rate.value ] )" ;>
 <hr>
 Remove Row: <input type="text" size="1" name="RowNum">
 <input type="button" value="Delete Row"
  onclick="deleteRow('tblPeople', this.form.RowNum.value)">
</form>
</body>
</html>
    Last edited by Dormilich; Oct 23 '11, 07:27 AM. Reason: please use [CODE] [/CODE] tags when posting code
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      you would probably have to re-do the (sub)total calculation each time a row is added or removed.

        Comment

        • Sayantan Dutta
          New Member
          • Oct 2011
          • 2
          #3
          THANKS Dormilich,
          What I am trying to ask is how do I access "amount" from Java Script and fairly print SubTotal(used document.write, but it seems if you print html document.print does not work).
          Can I have something as a global variable, I am fairly new to HTML and JS, this is my first try :-)

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              neither will document.write( ) work (because of how it works internally) nor is a global variable useful (all the required data are already in the table.

              it’s too late now so I will look into it tomorrow.

                Comment

                • RamananKalirajan
                  Contributor
                  • Mar 2008
                  • 608
                  #5
                  Hi Sayantan,
                  You can achieve it. Whenever you are adding a row or deleting a row make a call to another function. From the first row you can add up the third column value and sum it and display it on the subtotal. The following is a sample I write here (Not checked)

                  Code:
                  function doSubTotal(){
   var tblObj = document.getElementById('tblPeople');
   var rowLen = tblObj.rows.length;
   var subTotal = 0;
   for(var i=1;i<tblObj.rows.length;i++){
      var rowObj = tblObj.rows[i];
      subTotal+=parseInt(tblObj.rows[i].cells[rowObj.cells.length - 1].childNodes[0].data);
   }
   document.getElementById('subtotal').value=subTotal;
}
                  Please let me know if you have any doubts

                  Thanks and Regards
                  Ramanan Kalirajan

                    Comment

                    Previous template Next
                    Working...