Question

我有一个html表，如果填充了mysql表的值。这样：

function getCategories(){
    $prod = new C_Product();
    $cat= $prod->getCategorieenAsArray();

    $tr = "";
    foreach ($cat as $key => $value){
        $tr.="<tr><td>&nbsp;</td><td>$value</td><td><img src=\"images/delete_button.gif\"></td></tr>\n";

    }
    return $tr; 

}

现在我希望能够按下删除按钮从数据库中删除该行并刷新表，以便它实际上也从html页面上的表中删除。我想用于这个jQuery和Ajax。这对我来说应该不难。我的问题是如何选择要删除的行？ jquery如何知道哪个img被按下了？

我应该在img / tr中添加一个带有值的类吗？如果我使用id，我将不得不为要添加的每一行重新定义我的jquery函数，因此似乎不是正确的解决方案。

所以有人可以帮助我吗？

由于

//编辑：

与此同时，我继续以自己的方式尝试数字输出，现在我已经完成了一个带有正确id的完整ajax调用。

jQuery(document).ready(function(){

    jQuery("img.deleterow").click(function(){
        id = jQuery(this).parent().attr("id");
        jQuery.ajax({
            type: "POST",
            data: "id=" +id,
            url: "ajax_handler.php",
            success: function(msg){
                jQuery(this).parent().remove();
            }
        });

    });
});

现在我唯一的问题是在数据库中删除id时从表中删除tr。这就是我的tr的样子：

$tr.="<tr><td>&nbsp;</td><td>$value</td><td id=\"$key\"><img class=\"deleterow\" src=\"images/delete_button.gif\"></td></tr>\n";

Answer 1

我会defintely向img或tr添加一个类，并且还会添加一个ID，该ID具有数据库中元素的ID

但是，如果你不这样做，那就像这样

$('img').click(function(){
   var id = $(this ~ tr).attr("id");
   $.ajax(type: "POST",
          url: "some.php",
          data: "id="+id,
          success: function(msg){
             $(id).remove();
   });
});

编辑您的编辑：

您是否尝试过$（“＃id~tr”）选择器将其删除？例如$(#id ~ tr).remove();

如果您要添加ID，我也会将ID放在tr上，然后将$('#id').remove();删除tr

Answer 2

通常情况下，我会使用链接而不是纯粹的图像。因为它在语义上是正确的：

然后

$（“。deleteButton”）。click（function（）{ var deleteId = $（this）.attr（“href”）。substring（10）; // Ajax或URl调用等 }）;

更进一步，我甚至不会在a中添加任何图像，只需输入类似的内容：

<a href="..." class="...">Delete this row</a>

并将任何样式规则留给CSS来处理（如图像替换）。

Answer 3

见question。它将帮助您获取表格单元格的行和列索引。然后进行Ajax调用以从数据库中删除条目。在成功回调上，使用标准jQuery操作从表中删除行。在Ajax调用正在进行时，您可能希望阻止访问html页面。这样可以防止用户点击其他图像。

Answer 4

你对这个问题的直觉是正确的。您需要传递每条记录的数据库ID并将其存储在HTML中的某个位置，以便您知道传递给后端的值。如果您计划为没有javascript的用户（通常是个好主意）实现优雅降级的解决方案，那么您可能要实现的是删除单行的非ajax视图。如果您的应用程序使用pretty URLs，则可以通过/ table / delete / 23（或任何ID）访问该视图。在表生成代码中，您希望为每行添加一个链接，如下所示：

<a class="delete-button" href="/table/delete/23">Delete</a>

此时，你应该有一个很好的非JavaScript工作解决方案。现在我们可以添加AJAX了。此脚本使用一些javascript字符串修改来提取href的最后部分并将其转换为id。

$(".delete-button").click(function() {
    var id = this.href.slice(this.href.lastIndexOf('/')+1);
    // perform AJAX call using this id
    return false; // return false so that we don't follow the link!
});

此外，当您实现后端PHP函数以接受AJAX请求时，请不要忘记sanitize your input！

Jquery Ajax从表和db中删除行

4 个答案: