-3

我对 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>

我需要的是一种添加incoming1、incoming2 和任何其他incomingx 值并存储在totalin 中的方法，同样使用outgoing1,2etc，然后使用totalout-totalin 进行利润更新。因此，如果某个值与当前设置的值不同，它将自动更新所有其他字段。

有人能帮忙吗？

在这里提琴：http: //jsfiddle.net/Gt473/3/ 请注意，循环 2 不起作用，因为我不确定如何在 jsfiddle 上重复脚本，但它在 html 页面上确实有效。

4

1 回答 1

0

我不确定你的要求是什么。但这是我的看法，我发布的答案可能不是你想要的。而且下面的代码可以写得更好，但那是你研究的。

<form id="locations" method='post' action=''>
        <fieldset class="level">
            <legend>Loop1</legend>
            <label>Incoming</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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())
 });
于 2013-09-26T12:53:11.717 回答