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

发表于 | 分类于 ， | | 浏览 次
字数统计: 781 | 阅读时长 ≈ 4

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!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>
坚持原创技术分享，您的支持将鼓励我继续创作！
0%