Question

我有一个表单，我使用ajaxSubmitButton在HTML表格中添加产品项目。 ajaxSubmitButton帮助使用ajax添加项目，ajax url获取值并更新表格的主体<tr>，<td>。在表中，我想在每行的最后一列中保留一个删除按钮。单击删除按钮时，应删除一行。但这里删除按钮不起作用。我检查了有效的视图中的硬编码HTML表和jquery。

在这种情况下，我该如何解决这个问题。请帮我。我在下面给出了表单和控制器的代码：

形式：

Yii::app()->clientScript->registerScript('removecartitem', "
$('#remove').click(function(){
$('#cartDetails tr:first').remove();
})
");
?>

<div class="form-group">
    <div class="col-lg-2">
    <?php
    // this is the ajax submit button
    echo CHtml::ajaxSubmitButton('Add Item',Yii::app()->createUrl('admin/order/cart'),
        array(
            'type'=>'POST',
            'update'=>'#cartTable',
        ),
        array('class'=>'btn btn-primary btn-sm',));
    ?>
    </div>        
</div>
<div class="form-group">
    <div class="col-lg-12">
                <table id="cartDetails" class="table table-bordered sortableTable responsive-table">

                    <tbody id="cartTable"> // ajax updates this id 
                    </tbody>
                </table>

    </div>

</div>

在控制器中：

public function actionCart()
{
    if(isset($_POST["Order"])){            
    .....
    ..... 
    $cartDetails = Yii::app()->session['cart'];
    if(!empty($cartDetails)){
        foreach($cartDetails as $cart){
            echo '<tr>';
            echo '<td>'.$cart["product_id"].'</td>';
            echo '<td>'.$cart["product_name"].'</td>';
            echo '<td>'.$cart["product_code"].'</td>';
            echo '<td>'.$cart["quantity"].'</td>';
            echo '<td>'.$cart["price"].'</td>';
            echo '<td>'.$cart["totalPrice"].'</td>';
            echo '<td><input type="button" name="add" id="remove" value="Remove" class="btn btn-danger btn-xs"/></td>';
            echo '</tr>';

        }
    }

}

在这个阶段，jquery都不起作用。请帮助如何启用jquery然后如何激活删除按钮。如果我的解释不清楚，请告诉我。我添加了一个图像来解释清楚。

enter image description here

Answer 1

更改，因此您有一个要删除的类，例如

public function actionCart()
{
    if(isset($_POST["Order"])){            
    .....
    ..... 
    $cartDetails = Yii::app()->session['cart'];
    if(!empty($cartDetails)){
        foreach($cartDetails as $cart){
            .
            .
            .
            echo '<td>'.$cart["totalPrice"].'</td>'; // see below line , class : REMOVETHIS
            echo '<td><input type="button" name="doesntMatter" class="REMOVETHIS btn btn-danger btn-xs"/></td>';
            .

        }
    }

}

然后在页面准备好后，点击

将其删除

$(document).ready(function(){
    $('.REMOVETHIS').click(function(){
        $(this).parent().parent().remove();
    });
});

更新：

下面的代码只会删除第一行表格，

$('#cartDetails tr:first').remove();

我猜这甚至不会工作，因为在文档准备好之后需要使用jquery。喜欢：

$(document).raady(function(){
    //put jquery related code in here
});

和我们的朋友说的一样，你不能分配多个具有相同id的元素，因为你最好使用类，

并且在这种情况下，因为插入到表中的行是新鲜的，您需要再次声明

    $('.REMOVETHIS').click(function(){
        $(this).parent().parent().remove();
    });

插入行后

，或者您可以执行此操作：

 echo '<td><input type="button" name="doesntMatter" class="btn btn-danger btn-xs" onclick="removeRow(this)"/></td>';

当单击该元素时，将调用removeRow函数

function removeRow(element)
{
    $(element).parent().parent().remove();
}

Answer 2

我如何解决我的问题：

我订购了注册人的订单。在订单表格中，有3个字段我选择注册，选择产品，然后数量。有一个ajaxSubmitButton将此值发送给控制器（actionCart）。 Controller在会话中保存价值，即产品ID，名称，价格，数量，总价格，并以表格格式将ajax请求更新为订单。在回显<tr>，<td>期间，我添加了一个按钮，用于从会话中删除项目。所以，我想删除会话的值以及一次点击按钮的表行。但是按钮没有用，因为虽然我看到jquery被加载了，但是jquery没有工作。

我发现ajax更新的HTML不适用于早期加载的jquery。因此，我在另一个视图文件中更改了将更新的HTML表（我在控制器中回显的内容）分离的策略，并将renderPartial用于控制器。我将所需的Jquery片段注入到视图文件中。然后我发现jquery正在响应ajax请求的HTML标记。

现在我正在努力使用jquery和ajax取消设置会话数组和表行。

如何在yii中的自定义表中添加删除按钮

2 个答案: