By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,816 Members | 2,151 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,816 IT Pros & Developers. It's quick & easy.

I have a problem with writing a script to sum the number inputs of my table

P: 2
I am very new to java script and i have a table that for the life of me i cannot get to sum. Can anyone help me?
Oct 3 '16 #1
Share this Question
Share on Google+
1 Reply


P: 2
Expand|Select|Wrap|Line Numbers
  1. <table id="myTable">
  2. <tr>
  3.     <th>Activity</th>
  4.     <th>Sun</th>
  5.     <th>Mon</th>
  6.     <th>Tues</th>
  7.     <th>Wed</th>
  8.     <th>Thur</th>
  9.     <th>Fri</th>
  10.     <th>Sat</th>
  11.     <th>Total</th>
  12.   </tr>
  13. <tr>
  14.   <td>
  15. <select>
  16.   <option>Job Description</option>
  17.   <option>Programing</option>
  18.   <option>Analysis</option>
  19.   <option>Techicnal Writing</option>
  20.   <option>Other</option>
  21.   </select>
  22. </td>
  23. <td align="center" width="5%"><input type="number" value="0" min="1" max="10"></td>
  24. <td align="center" width="5%"><input type="number" value="0" min="1" max="10"></td>
  25. <td align="center" width="5%"><input type="number" value="0" min="1" max="10"></td>
  26. <td align="center" width="5%"><input type="number" value="0" min="1" max="10"></td>
  27. <td align="center" width="5%"><input type="number" value="0" min="1" max="10"></td>
  28. <td align="center" width="5%"><input type="number" value="0" min="1" max="10"></td>
  29. <td align="center" width="5%"><input type="number" value="0" min="1" max="10"></td>
  30. <td align="center" width="5%"><input align="center" type="number" name="total" min="0" max="99999999"></td>
  31. </tr> 
  32. </table>
  33. <button onclick="addRow()">Add Job Description  +</button>
  34. <br>
  35. <br>
  36. <br>
  37. <br>
  38. <br>
  39. <br>
  40.  
  41. <button onclick="myFunction()">Submit</button>
  42.  
  43. <script>
  44. function addRow() {
  45.     var table = document.getElementById("myTable");
  46.     var row = table.insertRow();
  47.     var cell1 = row.insertCell(0);
  48.     var element1 = document.createElement("Select");
  49.     var option1 = document.createElement("option");
  50.     option1.value="1";
  51.     option1.innerHTML="Job Description";
  52.     element1.appendChild(option1);
  53.     var option2 = document.createElement("option");
  54.     option2.value="2";
  55.     option2.innerHTML="Programming";               
  56.     element1.appendChild(option2);
  57.     var option3 = document.createElement("option");
  58.     option3.value="3";
  59.     option3.innerHTML="Analysis";               
  60.     element1.appendChild(option3);
  61.     var option4 = document.createElement("option");
  62.     option4.value="4";
  63.     option4.innerHTML="Technical Writing";               
  64.     element1.appendChild(option4);
  65.     var option5 = document.createElement("option");
  66.     option5.value="5";
  67.     option5.innerHTML="Other";               
  68.     element1.appendChild(option5);
  69. cell1.appendChild(element1);   
  70.     var cell2 = row.insertCell(1);
  71.     var cell3 = row.insertCell(2);
  72.     var cell4 = row.insertCell(3);
  73.     var cell5 = row.insertCell(4);
  74. var cell6 = row.insertCell(5);
  75. var cell7 = row.insertCell(6);
  76. var cell8 = row.insertCell(7);
  77. var cell9 = row.insertCell(8);
  78.  
  79.  
  80.     cell2.innerHTML = "<div align=\"center\"><input type=\"number\" value=\"0\" min=\"1\" max=\"10\"></div>";
  81.     cell3.innerHTML = "<div align=\"center\"><input type=\"number\" value=\"0\" min=\"1\" max=\"10\"></div>";
  82.     cell4.innerHTML = "<div align=\"center\"><input type=\"number\" value=\"0\" min=\"1\" max=\"10\"></div>";
  83.     cell5.innerHTML = "<div align=\"center\"><input type=\"number\" value=\"0\" min=\"1\" max=\"10\"></div>";
  84.     cell6.innerHTML = "<div align=\"center\"><input type=\"number\" value=\"0\" min=\"1\" max=\"10\"></div>";
  85.     cell7.innerHTML = "<div align=\"center\"><input type=\"number\" value=\"0\" min=\"1\" max=\"10\"></div>";
  86.     cell8.innerHTML = "<div align=\"center\"><input type=\"number\" value=\"0\" min=\"1\" max=\"10\"></div>";
  87.     cell9.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"total\" min=\"0\" max=\"99999999\"></div>";
  88. }
  89. </script>
  90.  
Oct 3 '16 #2

Post your reply

Sign in to post your reply or Sign up for a free account.