2 
<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():( これらの入力は多く、ID ではなく、これ$(this)とを使用する必要がありnext()ます。

4

1 に答える 1

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その要素も変更されたときに図が更新されるようにする必要があります。また、有効な数値が入力されていることを確認するための何らかの形式の検証も必要です。

このコードは短くすることができます。何が起こっているのかをできるだけ明確にするために、もう少し冗長にしています。

于 2012-04-19T11:13:01.977 に答える