Question

<table>
    <tr>
        <td class="one"><input type="text"></td><td class="two"><input type="text" value="12"></td><td class="three"><input type="text"></td>
    </tr>
    <tr>
        <td class="one"><input type="text"></td><td class="two"><input type="text" value="22"></td><td class="three"><input type="text"></td>
    </tr>
    <tr>
        <td class="one"><input type="text"></td><td class="two"><input type="text" value="14"></td><td class="three"><input type="text"></td>
    </tr>
</table>

$(".one input").change(function(){
   ???
})

现场：http://jsfiddle.net/34Vtk/

如果我将值填充到第一列（.one），那么此值应乘以.two input.val()，结果应显示在.three.input.val()中。

我可以使用ID进行此操作，但我无法使用函数$(this)和next() :(这些输入很多，我必须使用此$(this)和{{1而不是ID。

Answer 1

您需要同时使用$(this)和父tr元素作为上下文。

试试这个：

$(".one input, .two input").change(function() {
    var $row = $(this).closest("tr");
    var $one = $(".one input", $row);
    var $two = $(".two input", $row);

    var val1 = $one.val();
    var val2 = $two.val();
    var val3 = val1 * val2;

    $(".three input", $row).val(val3);
});

Example fiddle

您很可能还需要将此附加到.two input，以便在该元素也发生变化时更新数字，并进行某种形式的验证以确保输入有效数字。

这段代码可以缩短，我只是让它变得更加冗长，以尽可能清楚地说明发生了什么。

在表中使用函数$（this）和next（）等

1 个答案: