jquery - 在 grdiview 中创建动态文本字段

Question

<?php echo CHtml::beginForm('','post',array('id'=>'base-si-received-item-form'));?>
<?php 
    $this->widget('zii.widgets.grid.CGridView', array(
        'id'=>'base-si-received-item-grid',
        'dataProvider'=>BaseRefSiDetails::model()->search(),
        //'filter'=>$searchModel,
        'columns'=>array(       
            array(
                'class'=>'CCheckBoxColumn',
                'id'=>'base-si-received-item-id',       
                'selectableRows'=>2, // multiple rows can be selected
            ),                  
            array(
                'name'=>'unit',
                'header'=>'unit',
                'type'=>'raw',
                'value'=>'CHtml::textField(BaseSiReceivedItem::model()->quantity_received,"",array("id"=>"received_quantity","name"=>"quantity_received"))',
            ),
            array(
                'name'=>'unit',
                'header'=>'unit',
                'type'=>'raw',
                'value'=>'CHtml::dropDownlist(BaseSiReceivedItem::model()->unit,"unit",array("pc"=>"pc","box"=>"box"))'
            ),
            array(
                'name'=>'unit_cost',
                'header'=>'unit cost',
                'type'=>'raw',
                'value'=>'CHtml::textField(BaseSiReceivedItem::model()->unit_cost,"",array("id"=>"unit_cost"))',
            ),
            array(
                'name'=>'total_cost',
                'header'=>'total cost',
                'type'=>'raw',
                'value'=>'CHtml::textField(BaseSiReceivedItem::model()->total_cost,"",array("id"=>"total_cost","readonly"=>"readonly"))',
            ),
        )
    )
?>

我的gridview有问题。
我需要做的是，当输入收到的数量和单位成本时，价格将自动显示在总成本上。我有一个jquery脚本来做到这一点。
我的问题是唯一的第一行正在执行代码：

这是我的jQuery：

 $(document).ready( function(){
     $("#unit_cost").keyup(function() {        
         $("#total_cost").val($("#unit_cost").val() * $("#received_quantity").val());        
     });    
 });

Answer 1

正如@Örs 所说，将您的 id 更改为类。操作的上下文也应该是一行，如下所示：

$(document).ready( function(){
    $(".unit_cost").keyup(function(){
        var tr=$(this).closest('tr');
        $(".total_cost",tr).val($(".unit_cost",tr).val() * $(".received_quantity",tr).val());
    });
});