我怎樣才能在一個表格中添加多行？

Question

我想用jQuery自動更新每行的總數，但這不能正常工作。

這裏是jQuery代碼：

$('.val1').keydown(function(e) { 
    var val1 = this.value; 
    var val2 = $('.val2').val(); 
    var total = val1 * val2; 
    $('.equal').val(total); 
}); 

下面是HTML代碼：

<table> 
    <thead> 
    <tr> 
     <th>Value 1</th> 
     <th>Value 2</th> 
     <th>Equal</th> 
    </tr> 
    </thead> 
    <tr> 
    <td><input class="val1" name="val1" type="text" value=""></td> 
    <td><input class="val2" name="val2" type="text" value=""></td> 
    <td><input class="equal" name="equal" type="text" value=""></td> 
    </tr> 
    <tr> 
    <td><input class="val1" name="val1" type="text" value=""></td> 
    <td><input class="val2" name="val2" type="text" value=""></td> 
    <td><input class="equal" name="equal" type="text" value=""></td> 
    </tr> 
    <tr> 
    <td><input class="val1" name="val1" type="text" value=""></td> 
    <td><input class="val2" name="val2" type="text" value=""></td> 
    <td><input class="equal" name="equal" type="text" value=""></td> 
    </tr> 
</table> 

Answer 1

你需要爲目標的.val1你作用於正的來龍去脈。這裏是你將要使用的代碼：

$('.val1').keyup(function(e) { 
    var val1 = parseInt($(this).val()); 
    var val2 = parseInt($(this).parent().siblings('td').find('.val2').val()); 
    var total = val1 * val2; 
    $(this).parent().siblings('td').find('.equal').val(total); 
}); 

.keydown()改爲.keyup()因爲事件被解僱.val1收到按鍵值之前。由於您將這兩個值相乘，因此我將它們都轉換爲parseInt的數字，以便.equal不會以NaN作爲值。

你可以看到它在這裏的行動：http://jsfiddle.net/3hqkR/1/

Answer 2

$('.val2')會給你這個類名稱的所有元素的數組。

因此var val2 = $('.val2').val();將永遠不會工作。

你需要抓住的第一個元素相對於事件發生：

var val2 = $(this).prev('tr').find('.val2').val();