你有几个问题在这里。首先,主要问题是因为您的HTML无效;你不能放置一个 div 作为一个孩子 table 。它需要在一个 tr 和 td 要么 th 。这就是为什么 closest() 不起作用,因为渲染器正在移动 div 外 使表格有效的表格。
div
table
tr
td
th
closest()
您还声明您不想使用 id 重复此HTLM结构的属性,这很好,使用 class 而是属性。然后,您可以为所有这些元素分组相同的功能,而无需复制JS。
id
class
你也不应该使用 on* 内联事件处理程序。除了大规模过时之外,它们不保留提升元素的元素的范围,因此 this 参考很可能是 window ,导致计算逻辑出现问题。要解决此问题,请使用不显眼的事件处理程序,例如jQuery on() 和 input 事件,也包括用鼠标粘贴内容。
on*
this
window
on()
input
尽管如此,试试这个:
$(function() { $('.amount').on('input', function() { var $amount = $(this); var $table = $amount.closest('table'); var $tax = $table.find(".tax"); var $total = $table.find(".total"); var tax = parseFloat((1 / 10).toFixed(1)); $tax.val(tax); $total.val(parseFloat($amount.val()) + tax); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <table> <tr> <td> <input type="text" name="amount" class="amount"> </td> </tr> <tr> <td> <div> <b>tax</b> <p> <input name="tax" type="text" class="tax" readonly="readonly"> </p> </div> <div> <b>total</b> <p> <input name="sum" type="text" class="total" readonly="readonly"> </p> </div> </td> </tr> </table> </form>
最后一点,即 tax 计算是硬编码的 0.1 ,所以当你可以添加时,逻辑似乎有点过于复杂 0.1 到用户的输入。不过,我会假设这是一项正在进行的工作,税率是可变的。
tax
0.1