jQuery——td中添加input并求和

简介: td中添加input并求和

很简单,自行尝试即可

<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>


相关文章
|
6月前
|
JavaScript
jquery在光标位置插入内容指定内容(input、textarea)通用
jquery在光标位置插入内容指定内容(input、textarea)通用
41 0
|
JavaScript
jQuery 回车换行、input悬浮全选...
jQuery 回车换行、input悬浮全选...
70 0
|
JSON JavaScript 数据格式
jQuery数据结构渲染(3):文本和input/textarea框赋值
jQuery数据结构渲染(3):文本和input/textarea框赋值
55 1
|
JavaScript BI
jQuery根据填写的input的数值导出excel表格
jQuery根据填写的input的数值导出excel表格
61 0
|
JavaScript
jQuery动态生成input填写时间值并且提交给后端
jQuery动态生成input填写时间值并且提交给后端
69 0
|
JavaScript
jquery动态生成input,并且限制生成个数
jquery动态生成input,并且限制生成个数
51 0
|
JavaScript
jQuery点击按钮,生成input输入框
jQuery点击按钮,生成input输入框
62 0
|
JavaScript
jQuery val(); input 获取与设置默认输入内容
jQuery val(); input 获取与设置默认输入内容
71 0
|
JavaScript
jQuery控制input的字数
jQuery控制input的字数
|
JavaScript
jquery获取多个相同name的input的value值
jquery获取多个相同name的input的value值