【发布时间】：2020-11-28 14:19:07
【问题描述】：
我是 Jquery 的初学者。在以下问题上需要您的帮助。 我有一个 3 列和 3 行的 html 表。每列都有一个标题示例 col1、col2 和 col3。有一个列批准状态，其值为：已批准、待批准和未批准。我必须取用户在每列的每个文本框中输入的值的总和。目前在我的代码中，我正在为每一列取那个总和。但我只想在审批状态为“已批准”时才取款。我不确定要使用哪个事件处理程序，因为用户可以先输入数字或批准状态随机顺序。谢谢！
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
input {display: block;}
input.total {margin-top: 30px;}
[class*="total"] {
background: #ffff00;
p.double {border-style: double;}
}
.none{
display:none;
}
</style>
</head>
<body>
<table class="aa">
<th> Approval status</th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<tr>
<td id="selectBox1">
<select id = "myList1">
<option value = "1">Choose Approval Status</option>
<option value = "2">Approved</option>
<option value = "3">Approval Pending</option>
<option value = "4">Not Approved</option>
</select>
</td>
<td> <input type="text" class="qty1" value="" /> </td>
<td> <input type="text" class="qty2" value="" /> </td>
<td> <input type="text" class="qty3" value="" /> </td>
</tr>
<tr>
<td id="selectBox2">
<select id = "myList2">
<option value = "1">Choose Approval Status</option>
<option value = "2">Approved</option>
<option value = "3">Approval Pending</option>
<option value = "4">Not Approved</option>
</select>
</td>
<td> <input type="text" class="qty1" value="" /> </td>
<td> <input type="text" class="qty2" value="" /> </td>
<td> <input type="text" class="qty3" value="" /> </td>
</tr>
<tr>
<td> <input type="text" class="none" value="" /></td>
<td> <input type="text" class="total1" value="" /> </td>
<td> <input type="text" class="total2" value="" /> </td>
<td> <input type="text" class="total3" value="" /> </td>
</tr>
</table>
<script>
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total1").val("total:" + sum);
});
$(document).on("change", ".qty2", function() {
var sum = 0;
$(".qty2").each(function(){
sum += +$(this).val();
});
$(".total2").val("total:" + sum);
});
$(document).on("change", ".qty3", function() {
var sum = 0;
$(".qty3").each(function(){
sum += +$(this).val();
});
$(".total3").val("total:" + sum);
});
</script>
</body>
</html>【问题讨论】：
-
你为什么要多次使用
#selectBox和#myList？ ID 应该是唯一的 -
只有 1 个“审批状态”选择元素似乎更合乎逻辑。请详细说明为什么有3个。如果需要3个，应该什么时候相加？当所有 3 个都获得批准时？
-
查看我的回答希望对您有所帮助
-
@Rob Moll：我已经编辑了代码。抱歉造成混淆。最后一个下拉菜单是额外的。对于具有用户输入的文本框的每一行，都会有下拉菜单，用户将选择是否批准。然后我只需要在最后一个框中显示已批准状态的文本框的总和。谢谢！
标签： javascript html jquery html-table css-selectors