每次接触table时 少不了的就是要求和,很恶心而且很麻烦 今天自己写了一个td 纵向求和的方法(比较简单和简陋) 但是以此为基础能延伸出其他的操作

二话不多说

#先看js部门的代码

/**
     * 多行求和统计
     * @author Lengff
     * @time 2018-11-7 10:17:03
     */
function countTdSum() {
var tableTr = $("table").find(".tr1");//这里是获取有多少个tr的
var tds = $(".tr1").find("td");//这里是获取有多少个td的
var sum = [];
/*这个for是为了给sum初始化赋值为0*/
for (var i = 0; i < tds.length; i++) {
sum[i] = 0;
        }
/*这个for 是统计所以td 的和值*/
for (var i = 0; i < tableTr.length; i++) {
var tr = $(tableTr[i]).find("td");
for (var j = 0; j < tr.length; j++) {
sum[j] += parseInt($(tr[j]).text());
            }
        }
/*这个for 是将统计的结果赋值到对应的单元中去*/
for (var i = 0; i < sum.length; i++) {
$($(".tr2").find('td')[i]).text(sum[i]);
        }
    }

实现原理也比较简单,就是把需要统计的所有tr 标记一下,然后统计结果的tr 标记一下 将统计出来的结果再赋值到结果的tr中去

 

#HTML 部分的代码

<html>
<head>
<title>table td 纵向求和</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body onload="countTdSum()">
<div class="layui-row">
<table>
<tr class="tr1">
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr class="tr1">
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr class="tr2">
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</div>
</body>
<script>
/**
     * 多行求和统计
     * @author Lengff
     * @time 2018-11-7 10:17:03
     */
function countTdSum() {
var tableTr = $("table").find(".tr1");//这里是获取有多少个tr的
var tds = $(".tr1").find("td");//这里是获取有多少个td的
var sum = [];
/*这个for是为了给sum初始化赋值为0*/
for (var i = 0; i < tds.length; i++) {
sum[i] = 0;
        }
/*这个for 是统计所以td 的和值*/
for (var i = 0; i < tableTr.length; i++) {
var tr = $(tableTr[i]).find("td");
for (var j = 0; j < tr.length; j++) {
sum[j] += parseInt($(tr[j]).text());
            }
        }
/*这个for 是将统计的结果赋值到对应的单元中去*/
for (var i = 0; i < sum.length; i++) {
$($(".tr2").find('td')[i]).text(sum[i]);
        }
    }
</script>
</html>

 这个是基于Jquery的,所以一定要引入Jquery 的js文件

#最终实现 ​

table td 纵向求和_html