前端技术 手机教程
程序开发 平面动画
系统软件 运营推广
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

JQuery动态求和的方法

2019-04-08 15:15:27 来源:转载 作者:回不去的那些时光

HTML代码:

<table border="1" cellspacing="0">
    <thead>
        <th></th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>总分</th>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td><input type="text" placeholder="--" onkeyup="total()"></td>
            <td><input type="text" placeholder="--" onkeyup="total()"></td>
            <td><input type="text" placeholder="--" onkeyup="total()"></td>
            <td id="row1"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="text" placeholder="--" onkeyup="total()"></td>
            <td><input type="text" placeholder="--" onkeyup="total()"></td>
            <td><input type="text" placeholder="--" onkeyup="total()"></td>
            <td></td>
        </tr>
        <tr>
            <td>合计</td>
            <td id="col1"></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

JQuery代码:

function total(){
    var colTotal = 0;
    var rowTotal = 0;
    //  计算列和
    $('table tr:gt(0)').each(function(){
        if(parseFloat($(this).find('td:eq(1) input[type="text"]').val())){
            colTotal += parseFloat($(this).find('td:eq(1) input[type="text"]').val());
        }
    });
    $('#col1').text(colTotal);
    //  计算行和
    $('table tr:eq(1) td input[type="text"]').each(function(){
        if(parseFloat($(this).val())){
            rowTotal += parseFloat($(this).val());
        }
    });
    $('#row1').text(rowTotal);
}
分享到:
本文关键词:动态 求和

相关文章

零五科技,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五科技 版权所有 辽ICP备13002105号-1

//百度 //cnzz