JS 实现表单多条同样name的数据统计

最新推荐文章于 2022-09-20 22:30:08 发布

PeakXin

最新推荐文章于 2022-09-20 22:30:08 发布

阅读量1k

点赞数 1

分类专栏： Javascript & Jquery

本文链接：https://blog.csdn.net/xinyflove/article/details/103139748

版权

Javascript & Jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在前端开发过程中，我们会遇到form表单中name值相同数据的计算，比如，在结算中，可添加多条结算数据
下面就以实际代码来解决这问题，此实例用了layui框架来获取表单的数据

<!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>Demo</title>
</head>
<body>
    <form action="" id="formBox">
        应结算金额：<input type="text" name="all_settlement" value="100">
        <table>
            <thead>
            <tr>
                <th style="text-align: center; width: 15%;">类型</th>
                <th style="text-align: center; width: 15%">金额</th>
                <th style="text-align: center;">备注</th>
                <th style="text-align: center; width: 10%;">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td style="text-align: center;">
                    <select name="out_type[]">
                        <option value="+" selected>增加</option>
                        <option value="-">扣减</option>
                    </select>
                </td>
                <td style="text-align: center;">
                    <input type="number" name="fee[]" min="0" placeholder="请填写金额" value="20">
                </td>
                <td style="text-align: center;">
                    <input type="text" name="explain[]" placeholder="请填写备注" value="增加金额">
                </td>
                <td style="text-align: center;">
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td style="text-align: center;">
                    <select name="out_type[]">
                        <option value="+">增加</option>
                        <option value="-" selected>扣减</option>
                    </select>
                </td>
                <td style="text-align: center;">
                    <input type="number" name="fee[]" min="0" placeholder="请填写金额" value="10">
                </td>
                <td style="text-align: center;">
                    <input type="text" name="explain[]" placeholder="请填写备注" value="扣减金额">
                </td>
                <td style="text-align: center;">
                    <button>删除</button>
                </td>
            </tr>
            </tbody>
        </table>

        <button type="submit">提交</button>
    </form>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 如果我们使用layui框架的form获取表单数据，表单数据为
var formData = {
    'fee[0]' : '20',
    'out_type[0]' : '+',
    'explain[0]' : '增加金额',
    'fee[1]' : '10',
    'out_type[1]' : '-',
    'explain[1]' : '扣减金额',
    'all_settlement' : '100'    // 应结结算金额
};

var fee = []; var out_type = [];
$.each(formData, function (k, obj) {
    if (k.search(/(fee|out_type)\[\d+\]/i) >=0)
    {
        eval(k + ' = obj');// 此处转换为: fee[0] = obj; out_type[0] = obj; ....这就是为什么要在前面定义变量fee和out_type
    }
});

var actual_settlement = parseFloat(formData.all_settlement);
for (var idx in fee)
{
    if (out_type[idx] == '+')
    {
        actual_settlement += parseFloat(fee[idx]);
    }
    else if(out_type[idx] == '-')
    {
        actual_settlement -= parseFloat(fee[idx]);
    }
}

document.write('实际结算金额为：'+ actual_settlement);
</script>
</body>
</html>

来自 Peak Xin’s Blog – JS 实现表单多条同样name的数据统计