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

在前端开发过程中,我们会遇到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>
坚持原创技术分享,您的支持将鼓励我继续创作!