javascript - 在表中使用函数 $(this) 和 next() 等

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)和next()，而不是 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);
});

示例小提琴

您很可能还需要将其附加到该.two input元素上，以便在该元素也更改时更新图形，并且还需要某种形式的验证以确保输入有效数字。

这段代码可以缩短，我只是让它更详细一点，以尽可能清楚地说明发生了什么。