Question

首先，即使我想在单击表格后显示一条消息，也没有任何反应。我不了解第一步缺少的内容。最后，我要在单击删除按钮后确认删除。每个文件html.twig和js都有我的代码

main.js：

   var produits = document.getElementById('produits');

   if (produits) {
         produits.addEventListener('click', e => {
          // if (e.target.className === 'btn btn-danger') {
          //     if (confirm('Are you sure?')) {
          //         const id = e.target.getAttribute('data-id');
          //
          //         fetch(`/Delete/${id}`, {
          //
          //   }).then(res => window.location.reload());
          //}
          // }
    alert(2);
         });
    }

Affiche.html.twig：

    <table class="table table-striped table-bordered" id="produits">

                        <tr>

                            <th>Nom</th>
                            <th>Desctiption</th>
                            <th>Image</th>
                            <th>Operation</th>
                            <th>Actions</th>

                        </tr>


                        {%  for produit in produits %}

                            <tr>

                                <td>{{ produit.nomProduit }}</td>

                                <td>{{ produit.descriptionProduit }}</td>

                                <td><img alt="" src="{{ asset('uploads/images/'~produit.imageProduit) }}"></td>

                                <td>{{ produit.operationProduit }}</td>
                                <td>
                                    <a href="" class="btn btn-info" id="button">Show</a>
                                    <a href="" class="btn btn-success">Edit</a>
                                    <a href="Supprimer/{{ produit.idProduit }}" class="btn btn-danger" data-id="{{ produit.idProduit }}">Delete</a>
                                </td>


                            </tr>

                        {% endfor %}



                    </table>

Answer 1

根据定义，ID是唯一的，在这里看来您可以拥有多个产品，因此您应该设置一个类来针对所有产品。而且，您设置了“数据ID”而不是ID。我在示例中使用了“ produits-alerte”。
按类别选择产品并在其上循环以添加onClick事件，因此您既可以触发对话框，也可以获取所点击产品的特定ID。

因此它导致：

for (var i = 0, len = produits_alerte.length; i < len; i++) {  
    produits_alerte[i].onclick = function() {
        if (confirm("Are you sure?")) {

            console.log('Product ID Clicked : ' + this.getAttribute("data-id"));

            //delete product with id above

        } else {

            //or don't

        }
    } 
}

Here is a working solution仅使用原始JavaScript。

Answer 2

创建一个函数：

    <script>
      function getvalue() {
        alert("Hi");
        return;
      }
    </script>

使用“ onClick”将其链接到按钮：

<a href="Supprimer/{{ produit.idProduit }}" class="btn btn-danger" data-id="{{ produit.idProduit }}" onClick="getvalue()">Delete</a>

我想显示一条消息以确认删除

2 个答案: