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

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 然后如何激活删除按钮。如果我的解释不清楚，请告诉我。我添加了一张图片来解释更清楚。

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）。控制器在会话中保存值，即产品 id、名称、价格、数量、总价，并将表格格式的 ajax 请求更新到订单。在回显<tr>、<td> 期间，我添加了一个从会话中删除项目的按钮。所以，我想删除会话的值以及单击按钮后的表行。但是按钮不起作用，因为尽管我看到 jquery 已加载，但 jquery 不起作用。

我发现 ajax 更新的 HTML 不适用于之前加载的 jquery。所以我改变了在另一个视图文件中分离更新的 HTML 表（我在控制器中回显的内容）的策略，并在控制器中使用了 renderPartial。我将所需的 Jquery sn-ps 注入到视图文件中。然后我发现 jquery 正在响应 ajax 请求的 HTML 标签。

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