87,992
社区成员
发帖
与我相关
我的任务
分享实现不了表格每列相加的功能，大家帮忙看下是哪有问题
<html>
<head>
<title>DOM求和</title>
<script type="text/javascript">
function init(){
var tab = document.getElementById("tab").firstChild;//这是tbody节点
var trs = tab.childNodes;//获得table所有的tr节点
var col = 3;//需要计算的列有几个,目前是3个
var row = trs.length - 1;//需要计算的行有几个,目前最后一行不参与计算,所以长度-1
var nums = [];//存每一列和的数组
for (var i = 1; i <= col; i++) {//一共计算三次,从第二个td开始
var sum = 0;
for (var j = 0; j < row; j++) {//每次计算三行
sum += parseFloat(trs[j].childNodes[i].firstChild.nodeValue);
}
nums.push(sum);//存每一列和到数组
}
var lastTr = trs[row];//最后一行
for (var i = 1; i < lastTr.childNodes.length; i++) {
lastTr.childNodes[i].firstChild.nodeValue = nums[i - 1];//把数组的值按顺序赋给最后一列
}
}
</script>
</head>
<body onload="init()">
<table border="1px" id="tab">
<tbody>
<tr>
<td width="100px">第一加油站</td>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr>
<td>第二加油站</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>第三加油站</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>合计</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
<head>
<title>DOM求和</title>
<script type="text/javascript">
function init(){
var tab = document.getElementById("tab").firstChild;//这是tbody节点
var trs = tab.childNodes;//获得table所有的tr节点
var col = 3;//需要计算的列有几个,目前是3个
var row = trs.length - 1;//需要计算的行有几个,目前最后一行不参与计算,所以长度-1
var nums = [];//存每一列和的数组
for (var i = 1; i <= col; i++) {//一共计算三次,从第二个td开始
var sum = 0;
for (var j = 0; j < row; j++) {//每次计算三行
sum += parseFloat(trs[j].childNodes[i].firstChild.nodeValue);
}
nums.push(sum);//存每一列和到数组
}
var lastTr = trs[row];//最后一行
for (var i = 1; i < lastTr.childNodes.length; i++) {
lastTr.childNodes[i].firstChild.nodeValue = nums[i - 1];//把数组的值按顺序赋给最后一列
}
}
</script>
</head>
<body onload="init()">
<table border="1px" id="tab">
<tbody>
<tr>
<td width="100px">第一加油站</td>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr>
<td>第二加油站</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>第三加油站</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>合计</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
...全文
请发表友善的回复…
发表回复
