javascript - 请问JS如何实现获取表格中的单元格里面的数据，并让其累加呢？

Question

<script type="text/javascript" >
      var getTd=document.getElementById("myTable");
          rowsLength=getTd.rows.length;
      var theDate ;
    for(var i=1;i<rowsLength;i++)
    {
	   var std=getTd.rows[i].cells[2].innerText;
	   var stdVlue=std.replace(/天/gi,'');
	    stdVlue=Number(stdVlue);
	//getTd.rows[i].cells[11].innerText=stdVlue;
	      for(var g=rowsLength;g>=2;g--)
	    {
	        var std2=getTd.rows[g].cells[11].innerText;
	        var stdVlue2=std2.replace(/天/gi,'');
	        stdVlue2=Number(stdVlue2);
	        theDate=stdVlue2+stdVlue;
	    }
   	    getTd.rows[i].cells[11].innerText=stdVlue;
        document.write(stdVlue);
        document.write("<br/>");
        document.write(theDate);
        document.write("<br/>");

    }
</script>

Answer 1

其实 ... 我没太弄明白你的程序要实现什么效果 ...

所以只好按照标题来回答你 ... 如何累加表格中单元格的数据 ...

写了一个简单的程序来作为示例 ... 如下 ...

<table id="thetable" border="1" cellspacing="1" cellpadding="7" width="50%">
    <caption>Sunyanzi's Test</caption>
    <tbody>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>3</td><td>4</td></tr>
        <tr><td>5</td><td>6</td></tr>
        <tr><td>7</td><td>8</td></tr>
        <tr><td>9</td><td>10</td></tr>
        <!-- the row below is used to fill sum data ... -->
        <tr><th></th><th></th></tr>
    </tbody>
</table>

<script type="text/javascript">

    /* get our table ... */
    var table = document.getElementById( "thetable" );

    /* last line not contain data ... kick it out ... */
    var totalRows = table.rows.length -1;

    /* initialize two variables as basket ... */
    var firstColumn = secondColumn = 0;

    /* traverses from first row to last ... */
    for ( var i = 0; i < totalRows; ++ i ) {

        /* add new value to our basket ... */
        firstColumn += Number( table.rows[i].cells[0].innerHTML ) || 0;
        secondColumn += Number( table.rows[i].cells[1].innerHTML ) || 0;

    }

    /* put the result in last row ... */
    table.rows[i].cells[0].innerHTML = firstColumn;
    table.rows[i].cells[1].innerHTML = secondColumn;

</script>

顺便提一下你的代码里面的几个小问题 ... 希望能对你有些帮助 ...

首先是表格中的 rows 和 cells 数组 ... 第一个元素的索引都是 0 而不是 1 ...

比如表格的第一行 ... 应该是 i = 0 而不是 i = 1 ...

第一列和第二列 ... 应该是 cells[0] 和 cells[1] 而不是 cells[1] 和 cells[2] ...

以及你用到了 innerText ... 在 Gecko 内核的浏览器上是没有这个属性的 ...

Gecko 上类似的属性叫 textContent ... 当然其他浏览器也不支持 ...

所以当你的 td 标签中只包含数字不包含其他 HTML 标签的时候 ...

完全可以用兼容性更好的 innerHTML 来处理 ...

基本上我一眼能看到的就这些 ...

我觉得既然你能写到这里 ... 知道问题所在绝对就可以把程序改好了 ...

恩加油～