What's the problem with this simple access to the HTML table?

advertisements

I'm using JavaScript to access the HTML table element.

<html>
  <head>
  <title>Popup page</title>
  </head>
  <body>

   <form name="F1" method="POST">
        TOTAL  : <p id="total"></p>
    PERCENTAGE : <p id="percentage"></p>
   </form>

 //This table has 9 rows and 7 columns.
 // I'd like to get the 6th column elements from 2nd row onwards.

  <table  class="collapse" >
  <tbody>
  <tr><td>S.No.</td><td>Subject Code</td><td>Subject Name </td><td>Int. Marks</td>
  <td>Ext. Marks</td><td>Total</td><td>Credits</td><td>Result</td></tr>
  <tr><td>1</td><td>GR11A1009</td><td>Environmental Science</td><td>23</td><td>66</td>
  <td>89</td><td>3</td><td>P</td></tr>
  <tr><td>2</td><td>GR11A1010</td><td>Mathematics - II</td><td>22</td><td>58</td>
  <td>4</td><td>P</td></tr><td>80</td>
  <tr><td>3</td><td>GR11A1011</td><td>Engineering Chemistry</td><td>17</td><td>53</td>
  <td>70</td><td>3</td><td>P</td></tr>
  <tr><td>4</td><td>GR11A1012</td><td>Engineering Graphics</td><td>20</td><td>47</td>
  <td>67</td><td>3</td><td>P</td></tr>
  <tr><td>5</td><td>GR11A1013</td><td>IT Workshop</td><td>25</td><td>43</td><td>68</td>
  <td>2</td><td>P</td></tr>
  <tr><td>6</td><td>GR11A1014</td><td>Engineering Chemistry Lab</td><td>13</td>
  <td>30</td><td>43</td><td>3</td><td>P</td></tr>
  <tr><td>7</td><td>GR11A1015</td><td>English Lab</td><td>20</td><td>44</td><td>64</td>
  <td>3</td><td>P</td></tr>
  <tr><td>8</td><td>GR11A1018</td><td>Mathematics - III</td><td>20</td><td>67</td>
  <td>3</td><td>P</td></tr>
</tbody>
</table>

//JavaScript starts here
<script> 

var table = document.getElementByClass("collapse");

var marks = new Array();

var total = 0,percentage;

//here is code to get all the 6th column elements fro 2nd row onwards.
 for(var i=0;i<8;i++)
   marks[i] = table.ChildNodes[0].ChildNodes[i+1].ChildNodes[5].nodeValue;

//here I'm adding all the values stored ( subject marks) and finding the grand total
 for(var i=0;i<8;i++)
  total +=marks[i];

//now, I'm calculating the percentage
 percentage = total/725;

//Below code isn't having any effect. Why is it?
document.getElementById("total").innerHTML = total;
document.getElementById("percentage").innerHTML = percentage;

</script>

</body>
</html>

What is the problem with the above code ? What can I do to solve it?

Here is the output:


There are several problems with the code. In addition to the problem with getElementByClass (there is no such method, use document.getElementsByClassName("collapse")[0] instead), you are trying to access the elements in the table using ChildNodes (undefined). You probably meant to write childNodes, but you should really using children, since you don’t want to have to do with all the text nodes containing just whitespace. And you are accessing cells without checking that they exist; not all rows have 6th cell in your table.

There is also a spurious </tr> tag that confuses table parsing. Remove it.

Morever, to get the content of a td element, you cannot use nodeValue, which is defined for text nodes only. You could use innerText, but due to issues in browser support, the good old innerHTML is safer. Then you need to convert the data from string to number (otherwise adding 2 and 2 gives your 22, not 4), e.g. with the Number function. You may wish to add some error-checking here (and elsewhere).

 for(var i=0;i<8;i++)
   marks[i] = table.children[0].children[i+1].children[5].innerHTML;
 for(var i=0;i<8;i++)
   total += Number(marks[i]);