2012-04-19 17 views
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(){ 
    ??? 
}) 

LIVE:http://jsfiddle.net/34Vtk/

私は最初の列(.one)に値を記入した場合、この値は.two input.val()で乗算されなければならないと結果が.three.input.val()に表示されるはずです。

私はIDでこれを行うことができますが、私は機能$(this)next()を使用することはできません:(これらの入力はたくさんあると私はこの$(this)next()、ないIDのために使用しなければなりません。

答えて

1

あなたは両方を使用する必要があります。

$(".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

01: $(this)とコンテキストとして親 tr要素

はこれを試してみてください

.two inputにも添付する必要があります。その要素が変更されたときに図が更新され、有効な番号が入力されるようにするための検証も必要です。

このコードを短縮することができます。できるだけ明確にするために、もう少し冗長にしました。

+0

ありがとうございます。どのように私は常にFLOATとして結果を表示できますか? http://jsfiddle.net/34Vtk/6/値= 11.00の場合は22.00ではなく22だけ表示 –

関連する問題