关于多个tr和td的Keyup操作

Question

问题：我需要在表的每一行上使用on keyup Jquery函数进行访问。

我需要为此执行多个表，但是现在我从一个表开始。按用户选择的信息驱动表中该行数。因此它可能为1或最多为15。我需要将两个输入相乘并将其输出到同一行的td中。当选择了行中的最后一个td乘以时，会触发on keyup。

我已经能够使它在第一行工作，但是下班后却没有行。所有表中的两个td保持不变。我尝试了几种不同的方法来隔离tr，但均未成功。

这是我一直在使用的功能：

//The td location I want to output to
<td>
  <span id="mcalPremium">$</span>
</td>

 $("#alSublineValSubmitTBL tbody tr td:nth-child(11) input").on('keyup', function (e) {
    var ex = $("#alSublineValSubmitTBL tbody tr td:nth-child(11) input").val();
    var r = $("#alSublineValSubmitTBL tbody tr td:nth-child(9) input").val();
    var exp = parseInt(ex);
    var rate = parseFloat(r);
    var premium = rate * exp;

    //display premium in premium field
    //#mcalPremium is a span within the table. It is the precise location I want to display the multiplied number.

    $('#mcalPremium').html('$' + premium).digits();

});

 //Insert comma every for premium
    $.fn.digits = function () {
        return this.each(function () {
            $(this).text($(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
        });
    };

一如既往，非常感谢您的帮助。

Answer 1

因此，请引用该元素，并使用它在同一行中查找其他输入。很奇怪，您只是在两个输入之一上收听事件，但我会按照您的方式进行。

$("table").on("input", "td:nth-child(3)", function () {
   var cell = $(this)
   var input1 = +cell.find("input").val() || 0
   var input2 = +cell.parent().find("td:nth-child(2) input").val() || 0
   cell.parent().find("span.result").text(input1+input2)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>One</td>
    <td><input type="number" value="1"/></td>
    <td><input type="number" value="1"/></td>
    <td><span class="result"></span></td>
  </tr>
  <tr>
    <td>TWO</td>
    <td><input type="number" value="2"/></td>
    <td><input type="number" value="2"/></td>
    <td><span class="result"></span></td>
  </tr>
  <tr>
    <td>THREE</td>
    <td><input type="number" value="3"/></td>
    <td><input type="number" value="3"/></td>
    <td><span class="result"></span></td>
  </tr>
</table>