我怎样才能在一个表格中添加多行？

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();