What's wrong with this simple HTML table accessing?

StackOverflow https://stackoverflow.com/questions/22453279

  •  15-06-2023
  •  | 
  •  

Question

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:

enter image description here

Was it helpful?

Solution

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]);

OTHER TIPS

I think you mean document.getElementsByClassName() change your document.getElementByClass to document.getElementsByClassName() And my personal suggestion for you is to use jquery for this , which may be much more efficient and easy for this purpose

In jquery you can simplify it like this (Dont forget to add a class to your total TD)

    var total = 0;
    var percentage = 0;

    $(".collapse tr").each(function(e){
       var tr = $(this);
       var mark =$(this).find(".total").html(); 
       var marktst=0;
       if(!isNaN(Number(mark))) //NullChecking
       {
       marktst =Number(mark);
       }
    total +=marktst;

   });
   document.getElementById("total").innerHTML = total;

A fiddle is given below

http://jsfiddle.net/AmarnathRShenoy/j4hVc/5/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top