jQuery——td中添加input并求和

Southern Wind

于 2022-07-08 17:00:18 发布

阅读量884

点赞数 1

分类专栏： jQuery 文章标签： jquery servlet java

本文链接：https://blog.csdn.net/nanchen_J/article/details/125681864

版权

jQuery HTML表格数据计算输入验证前端开发

关键词由CSDN通过智能技术生成

jQuery 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

很简单，自行尝试即可

<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div class="layui-row">
        <table border="1">
            <tr class="tr1">
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr class="tr1">
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr class="tr1">
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr class="tr2">
                <td><input disabled="disabled" type="text"></td>
                <td><input disabled="disabled" type="text"></td>
                <td><input disabled="disabled" type="text"></td>
                <td><input disabled="disabled" type="text"></td>
                <td><input disabled="disabled" type="text"></td>
            </tr>
        </table>
    </div>
</body>
<script>
    $(document).ready(function () {
        a()
    })
    function a() {
        var tableTr = $("table").find(".tr1");//获取所有tr
        var tds = $(".tr1").find("input");//获取所有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("input");
            // console.log(tr.val);
            for (var j = 0; j < tr.length; j++) {
                if ($(tr[j]).val() == '' || $(tr[j]).val().indexOf(" ") >= 0) {
                    // 让他输出浮点数
                    sum[j] += parseFloat($(tr[j]).val() + 0);
                } else if ($(tr[j]).val().indexOf(" ")) {
                    sum[j] += parseFloat($(tr[j]).val());
                }
                // console.log($(tr[j]).val());
            }
        }
        /*这个for 是将统计的结果赋值到对应的单元中去*/
        for (var i = 0; i < sum.length; i++) {
                $($(".tr2").find('input')[i]).val(sum[i].toFixed(2));
                if (isNaN(sum[i])) {
                    // 如果总数出现NAN则需要进行重改
                    $($(".tr2").find('input')[i]).val('请输入正确数值');
                }
        }
        var testVal = $('input').val();
    }
    $('.tr1 input').on("keyup", function(){
        a()
        // 判断是否为数字或者小数点，如果不是数字或小数点则清空输入框
        $(this).val($(this).val().replace( /[^\d.]/g,""));
    }).trigger('keyup');
</script>

</html>