在前端開發過程中，我們會遇到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>