使用JQuery对table进行动态的计算行列的值

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<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>

<script src="js/jquery.min.js"></script>
<script>
    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);
    }
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容