table td 横向求和

之前介绍了纵向求和有点依赖 class 后来自己改了一下也不需要依赖自己class 但是懒的去改博客,所以今天又弄了一个横向求和(工作需要,网上看别人的我觉得方法也不是很适用我,所以还是自己写一个) , 话不多说,直接贴代码

#js 部分的代码

/**
     * table tr td 横向求和
     * @author Lengff
     */
    function countTd() {
        /*这里的 4 表示 求前三行的和, 第四行是结果区域*/
        var countNum = 4;
        //获取所有的tr
        var allTr = $("table").find("tr");
        //我这里的规则是前面三个加得到第四个 依次递推
        for (var i = 0; i < allTr.length; i++) {
            var trTds = $(allTr[i]).find('td'), count = 0;
            /*重点来了 遍历所有的td 让其第四个等于前面三个相加*/
            for (var j = 0; j < trTds.length; j++) {
                var td = $(trTds[j]);
                /*判断 是不是前三个个数*/
                for (var k = 0; k < countNum - 1; k++) {
                    if (j % countNum == k) {
                        count += parseInt(td.text());
                    }
                }
                /*这里为什么要j+1呢? 因为j是从0 开始的*/
                if ((j + 1) % countNum == 0) {
                    td.text(count);
                    count = 0;
                }
            }
        }
    }

#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="countTd()">
<div class="layui-row">
    <table width="900px" border="1px">
        <tr>
            <th>姓名</th><th>数学</th><th>语文</th><th>英语</th><th>求和</th><th>历史</th><th>政治</th><th>思想</th><th>求和</th>
        </tr>
        <tr>
            <th>IOS</th><td>1</td><td>2</td><td>4</td><td></td><td>2</td><td>3</td><td>5</td><td></td>
        </tr>
        <tr>
            <th>Android</th><td>1</td><td>2</td><td>7</td><td></td><td>2</td><td>3</td><td>8</td><td></td>
        </tr>
        <tr>
            <th>Windows</th><td>1</td><td>2</td><td>9</td><td></td><td>2</td><td>3</td><td>12</td><td></td>
        </tr>
    </table>
</div>
</body>
<script>

    /**
     * table tr td 横向求和
     * @author Lengff
     */
    function countTd() {
        /*这里的 4 表示 求前三行的和, 第四行是结果区域*/
        var countNum = 4;
        //获取所有的tr
        var allTr = $("table").find("tr");
        //我这里的规则是前面三个加得到第四个 依次递推
        for (var i = 0; i < allTr.length; i++) {
            var trTds = $(allTr[i]).find('td'), count = 0;
            /*重点来了 遍历所有的td 让其第四个等于前面三个相加*/
            for (var j = 0; j < trTds.length; j++) {
                var td = $(trTds[j]);
                /*判断 是不是前三个个数*/
                for (var k = 0; k < countNum - 1; k++) {
                    if (j % countNum == k) {
                        count += parseInt(td.text());
                    }
                }
                /*这里为什么要j+1呢? 因为j是从0 开始的*/
                if ((j + 1) % countNum == 0) {
                    td.text(count);
                    count = 0;
                }
            }
        }
    }
</script>
</html>

#效果图

#尾巴

table 的两种求和方式都写了一遍 ,发现相对还是比较简单的,更多的还是自己总结和归纳一些知识

猜你喜欢