Jquery 表中表单中的实时更新值

我创建了一个表来实时计算几个字段的总计。我在表后有一个表单，其中有一个名为amount的输入字段，如何使其值也实时更新为与表中总计相同的值。这意味着，若表中的总计为10，则表中的该值也应更改为10

参见小提琴：

HTML:

就在你做完之后

$('#total').text(total);

你能行

$("form input[name='amount']").val(total);

你是说像这样

<table>
    <thead>
        <tr>
            <th>VARIABLE</th>
               <th>QTY</th>
            <th>PRICE</th>
            <th>SUM</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Millage</td>
            <td><input class='qty' size='1'/></td>
            <td class='price'>1.25</td>
            <td class='sum'>0</td>
        </tr>
        <tr>
            <td> Number of vans</td>
            <td><input class='qty' size='1'/></td>
            <td class='price'>2.10</td>
            <td class='sum'>0</td>
        </tr>
                <tr>
            <td colspan='2'>Total</td>
            <td id='total'></td>
        </tr>
    </tbody>
</table>
<form action="">
<input id="amount" name="amount" value="0.00"><!-- add an id for amount -->
</form>


function getTotal(){
    var total = 0;
    $('.sum').each(function(){
        total += parseFloat(this.innerHTML)
    });
    $('#total').text(total);
    $('#amount').val(total); // set 'amount' value.
    // $("form input[name='amount']").val(total); // If you want to target it by name, use this.
}

getTotal();

$('.qty').keyup(function(){
    var parent = $(this).parents('tr');
    var price = $('.price', parent);
    var sum = $('.sum', parent);
    var value = parseInt(this.value) * parseFloat(price.get(0).innerHTML||0);
    sum.text(value);
    getTotal();
})

变量
数量
价格
总和
米拉奇
1.25
0
货车数目
2.10
0
全部的
函数getTotal（）{
var合计=0；
$（'.sum'）。每个（函数（）{
total+=parseFloat（this.innerHTML）
});
$（'总计'）.text（总计）；
$（“#金额”）.val（总计）；//设置“金额”值。
//$（“表单输入[name='amount']”）。val（总计）；//如果要按名称将其作为目标，请使用此选项。
}
getTotal（）；
$（'.qty'）.keyup（函数（）{
var parent=$（this.parents（'tr'）；
风险值价格=$（“.price”，父项）；
变量总和=$（'.sum'，父项）；
var value=parseInt（this.value）*parseFloat（price.get（0.innerHTML | | 0）；
总和。文本（值）；
getTotal（）；
})

---

这不是OP要求的。“如果表中的总计为10，则表单中的此值也应更改为1”表单字段上不需要键入事件。在本例中，

$（“#金额”）

将不起作用，因为

金额

是

名称

而不是

id

。是的，您可以在JSFIDLE中看到我的示例，我为amount添加了一个id。是否有一种方法可以通过名称来定位它是的，正如我在示例中所说的那样

$（“表单输入[name='amount']”）

对，$（“表单输入[name='amount']”）可以通过名称来确定目标。不，这是不正确的。它不显示总计，而只是a的总计row@user3583220：您将看到，在我发现最初的错误后，我更新了答案以使用

getTotal（）

方法中的

total

。是的，现在它看起来是正确的，我将在10分钟后选择它作为正确答案。谢谢。我为最初的错误道歉。快乐编码！

$("form input[name='amount']").val(total);

$('[name="amount"]').keyup(function() {
    total = parseFloat(0);
    $('.price').each(function() {
        total += parseFloat($(this).text());
    });
    $('#total').text(total);
});

<table>
    <thead>
        <tr>
            <th>VARIABLE</th>
               <th>QTY</th>
            <th>PRICE</th>
            <th>SUM</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Millage</td>
            <td><input class='qty' size='1'/></td>
            <td class='price'>1.25</td>
            <td class='sum'>0</td>
        </tr>
        <tr>
            <td> Number of vans</td>
            <td><input class='qty' size='1'/></td>
            <td class='price'>2.10</td>
            <td class='sum'>0</td>
        </tr>
                <tr>
            <td colspan='2'>Total</td>
            <td id='total'></td>
        </tr>
    </tbody>
</table>
<form action="">
<input id="amount" name="amount" value="0.00"><!-- add an id for amount -->
</form>


function getTotal(){
    var total = 0;
    $('.sum').each(function(){
        total += parseFloat(this.innerHTML)
    });
    $('#total').text(total);
    $('#amount').val(total); // set 'amount' value.
    // $("form input[name='amount']").val(total); // If you want to target it by name, use this.
}

getTotal();

$('.qty').keyup(function(){
    var parent = $(this).parents('tr');
    var price = $('.price', parent);
    var sum = $('.sum', parent);
    var value = parseInt(this.value) * parseFloat(price.get(0).innerHTML||0);
    sum.text(value);
    getTotal();
})