Question

我使用JavaScript访问HTML表格元素。

<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>

上述代码有什么问题？我该怎么做才能解决它？

这是输出：

enter image description here

Answer 1

代码有几个问题。除了getElementByClass的问题（没有这样的方法，请使用document.getElementsByClassName("collapse")[0]）之外，您正尝试使用ChildNodes（未定义）访问表中的元素。您可能打算编写childNodes，但您应该使用children，因为您不希望与仅包含空格的所有文本节点有关。你正在访问单元格而不检查它们是否存在;并非所有行都有第6个单元格。

还有一个虚假的</tr>标记会混淆表格解析。删除它。

此外，要获取td元素的内容，您不能使用仅为文本节点定义的nodeValue。您可以使用innerText，但由于浏览器支持方面的问题，旧的innerHTML更安全。然后你需要将数据从字符串转换为数字（否则添加2和2将得到22而不是4），例如使用Number功能。您可能希望在此处（以及其他地方）添加一些错误检查。

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

Answer 2

我认为你的意思是document.getElementsByClassName（）将document.getElementByClass更改为document.getElementsByClassName（）我个人的建议就是使用jquery，这可能会更有效，更容易达到此目的

在jquery中你可以像这样简化它（别忘了给你的总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;

下面给出了一个小提琴

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

这个简单的HTML表访问有什么问题？

这是输出：

2 个答案: