table td 纵向求和

每次接触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文件

#最终实现效果

猜你喜欢