在 Jquery 中添加循环变量并存储在输入字段中
Adding looped variables in Jquery and storing in input field
我对Javascript/Jquery等一无所知，但使用Google和人们的答案，我使用以下方法将x个字段相加并显示在小计框中。
以下脚本循环，因此每次您看到一个 1 时，每个循环计数都会递增。这意味着将显示每个计数的总计，编辑任何数字只会更新该部分的总计。
var $form = $('#locations'),
$summands1 = $form.find('.addme1'),
$sumDisplay1 = $('#incoming1');
$form.delegate('.addme1', 'change', function () {
var sum = 0;
$summands1.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplay1.val(sum);
$summandsa1 = $form.find('.addmea1'),
$sumDisplaya1 = $('#outgoing1');
});
$form.delegate('.addmea1', 'change', function () {
var sum = 0;
$summandsa1.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplaya1.val(sum);
});
这是一个示例表单
<form id="locations" method='post' action=''>Loop 1
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="300" name="" id="incoming1">
<input type="text" value="600" name="" id="outgoing1">
<br>Loop 2
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="300" name="" id="incoming2">
<input type="text" value="600" name="" id="outgoing2">
<br>
<br>
<br>Total :
<input type="text" value="600" name="" id="totalin">
<input type="text" value="1200" name="" id="totalout"><br>
Profit :
<input type="text" value="600" name="" id="profit">
</form>
我需要的是一种将传入 1 传入 2 加上任何其他传入 x 值并存储在总计中的方法，同样，对于传出 1,2 等，然后使用总计总计进行利润更新。因此，如果值与当前设置的值相比发生了变化，它将自动更新所有其他字段。
谁能帮忙？
在这里小提琴：http://jsfiddle.net/Gt473/3/请注意，循环 2 不起作用，因为我不确定如何在 jsfiddle 上重复脚本，但它确实适用于 html 页面。
我不确定你的要求是什么。但这是我的看法，我发布的答案不是你要找的。下面的代码也可以写得更好，但这是供你研究的。
<form id="locations" method='post' action=''>
<fieldset class="level">
<legend>Loop1</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop2</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop3</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop4</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop5</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="total">
<legend>Total</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" id="totalIncoming" disabled>
<input type="text" value="" name="" id="totalOutgoing" disabled>
</fieldset>
<fieldset>
<legend>Profit</legend>
<input type="text" value="" name="" id="profit" disabled>
</fieldset>
</form>
var $form = $('#locations'),
$totalIncoming = $('#totalIncoming'),
$totalOutgoing = $('#totalOutgoing'),
$profit = $('#profit');
$form.on('input', '.level input', function () {
var textBoxClass = $(this).attr('class'),
$level = $(this).closest('.level'),
$subTextBox = null,
$totalTextBox = null,
$textBoxes = null,
$subTextBoxes = null,
subSum = 0,
totalSum = 0;
if(textBoxClass === 'incoming'){
$textBoxes = $level.find('.incoming');
$subTextBox = $level.find('.subIncoming');
$totalTextBox = $('#totalIncoming');
$subTextBoxes = $form.find('.subIncoming');
}else{
$textBoxes =$level.find('.outgoing');
$subTextBox = $level.find('.subOutgoing');
$totalTextBox = $('#totalOutgoing');
$subTextBoxes = $form.find('.subOutgoing');
}
$textBoxes.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) subSum += value;
});
$subTextBox.val(subSum);
$subTextBoxes.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) totalSum += value;
});
$totalTextBox.val(totalSum);
$profit.val($totalIncoming.val() - $totalOutgoing.val())
});
相关文章：
- npm警告包.jsonCrackingJS@0.0.1没有存储库字段
- 本地存储自动完成/提前键入字段的数据
- 将会话登录页存储在cookie中以进行表单解析(通过隐藏字段）
- 如何存储&读取输入字段中的任意url
- 将布尔值存储在隐藏字段中以进行表单处理
- 为什么在下面的场景中，用于存储所选文件名和文件路径的隐藏输入字段没有在表单上生成
- 使用本地存储存储字段值
- 可编辑文档中多个字段的本地存储
- jQuery:在输入字段上使用Web存储/本地存储
- 在数组中存储 JQuery 字段与仅存储选择字符串相比如何
- 如何在煎茶上循环存储和计数字段数据
- 如何移除 DOJO 数据存储添加到我提取的项目中的所有额外字段
- 如何使用 jquery 使用本地存储变量设置输入字段
- EXT JS :在组合框中，如何为不在存储中的记录设置显示字段
- 在 Jquery 中添加循环变量并存储在输入字段中
- Google Maps JavaScript API v3 - 在iPhone上查看的网页上的自动完成字段不存储值，不返
- 洋红色 2 中的媒体存储浏览器字段
- 如何使用存储在 rails 序列化字段中的数据
- 克隆 使用 javascript 选择选项并将它们存储在隐藏字段中
- 返回数组中存储字段的数据
