0
Answer

Need Assistance with "Add ROW, DELETE ROW and Total SUM

Please assist me I need two seperate script in one table. 
I am trying to create a Purchase order. 
 
(Output )
Quantity         Rate          Total         Tax         Final Cost 
    10             12.20         112.00        1.7           190.40 
    10             11.10         111.00         1.7          188.70
 
                  Total             223.00                        379.10 
 
* Everything in Pink is Auto calculated 
* Rest is manual ( Quantity, Rate and Tax ) is user input.
 
Script 1 - Add, Delete ROW and Script 2 - Add SUM (total)
 
I am trying to combine this script but its not working. Please assist. 
 
SCRIPT 1 CODE : ADD SUM
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">  
  2. </script>  
  3. <script>  
  4. $(document).ready(function() {  
  5. //iterate through each textboxes and add keyup  
  6. //handler to trigger sum event  
  7. $(".txt").each(function() {  
  8. $(this).keyup(function() {  
  9. calculateSum();  
  10. });  
  11. });  
  12. });  
  13. function calculateSum() {  
  14. var sum = 0;  
  15. //iterate through each textboxes and add the values  
  16. $(".txt").each(function() {  
  17. //add only if the value is number  
  18. if (!isNaN(this.value) && this.value.length != 0) {  
  19. sum += parseFloat(this.value);  
  20. $(this).css("background-color", "#FEFFB0");  
  21. }  
  22. else if (this.value.length != 0){  
  23. $(this).css("background-color", "red");  
  24. }  
  25. });  
  26. $("#sum").html(sum.toFixed(2));  
  27. }  
  28. </script>  
  29. <script src="jquery.tableTotal.js"></script>  
SCRIPT 2 : ADD ROW /DELETE ROW
  1. <SCRIPT language="javascript">  
  2. function addRow(tableID) {  
  3. var table = document.getElementById(tableID);  
  4. var rowCount = table.rows.length;  
  5. var row = table.insertRow(rowCount);  
  6. var cell1 = row.insertCell(0);  
  7. var element1 = document.createElement("input");  
  8. element1.type = "checkbox";  
  9. element1.name="chkbox[]";  
  10. cell1.appendChild(element1);  
  11. var cell2 = row.insertCell(1);  
  12. cell2.innerHTML = rowCount + 1;  
  13. var cell3 = row.insertCell(2);  
  14. var element2 = document.createElement("input");  
  15. element2.type = "text";  
  16. element2.name = "txtbox[]";  
  17. cell3.appendChild(element2);  
  18. }  
  19. function deleteRow(tableID) {  
  20. try {  
  21. var table = document.getElementById(tableID);  
  22. var rowCount = table.rows.length;  
  23. for(var i=0; i<rowCount; i++) {  
  24. var row = table.rows[i];  
  25. var chkbox = row.cells[0].childNodes[0];  
  26. if(null != chkbox && true == chkbox.checked) {  
  27. table.deleteRow(i);  
  28. rowCount--;  
  29. i--;  
  30. }  
  31. }  
  32. }catch(e) {  
  33. alert(e);  
  34. }  
  35. }  
  36. </SCRIPT>  
// Table CODE
  1. <TABLE id="dataTable" width="350px" border="0">  
  2. <TR>  
  3. <TD><INPUT type="checkbox" name="chk"/></TD>  
  4. <TD> 1 </TD>  
  5. <TD> <INPUT type="text" /> </TD>  
  6. </TR>  
  7. </TABLE>  
  8. <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />  
  9. <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />  
Any help is greatly appreciated.