您的位置:首页 > Web前端 > JavaScript

JS如何实现获取表格中的单元格里面的数据,并让其累加

2016-11-29 11:38 666 查看
<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
 来处理
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: