javascript - jQuery 动态创建输入总和并在选择选项上减去

Question

我正在使用 jquery，需要帮助来计算取决于动态插入的选择选项的输入值。我希望如果选择值是借方，它将从选定的贷方值中减去，并且差异显示在 id diff 中，因为我插入了更多 ows，所有值都是通过借方和贷方计算的。

<table class="vtable">
    <tr>
        <td>Type</td>
        <td>Amount</td>
    </tr>
    <tr>
        <td>
            <select name="type" id="type">
            <option>-type -</option>
            <option value="debit">debit</option>
            <option value="credit">credit</option>
            </select>
        </td>
        <td><input type="text" id="amount"></td>
    </tr>
</table>

我的小提琴演示如下

演示

谢谢

Answer 1

演示

试试这个

$(document).on('change', 'select', function () {
        var value = $(this).val();
        var input = $(this).parents('td').next('td').find('input:text');
        if (value == 'debit') {
            total -= parseInt(input.val());
        } else if (value == 'credit') {
            total += parseInt(input.val());
        }
        $('#diff').html('Differance:' + total);
    });

希望这有帮助，谢谢

Answer 2

$('select#type').on('change', function() {
    if($(this).val() === "debit"){
        //Get the difference between 2 variables and store result in diff
        $("#diff").val(Math.abs(a - b)) 
    }else if($(this).val() === "credit"){
        //perform addition and store value in sum object
        $("#sum").val(x+y)
    } 
});

Answer 3

像这样的东西呢？

$('select[name="type"]').change(function()
{
 if($(this).val() === 'credit')
 {
    $("#amount").val() += $('input[type="text"]').val()

 }
 else if($(this).val() === 'debit')
 {
    $("#amount").val() -= $('input[type="text"]').val()
 }
})

我使用change()函数来触发更改。我不知道这是否是你的意思，但我希望它以某种方式有所帮助。

Answer 4

more在按钮单击处理程序中更正了一个问题。请参阅以下更改：

$("#more").click(function() {
  $(".vtable tr:last").clone().find("input, select").each(function() {
    $(this).attr({'id': function(_, id) { return id + 1 }});
  }).end().appendTo(".vtable");
});

为了处理动态添加select和input文本的事件，您可以按如下方式实现。

注意：.on()与您的表格一起使用，因为您正在使用选择和输入文本动态添加行。

对于select：

$('.vtable').on('change', "select", function (e) {
    var valueSelected = this.value;
    alert(valueSelected);

});

对于input文本

$('.vtable').on('keyup', "input", function (e) {
    var valueEntered = this.value;
    alert(valueEntered );
});