Jquery Ajax удаляет строки из таблицы и в БД

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 со значением в нем? Если бы я использовал идентификатор, мне пришлось бы переопределить свою функцию jquery для каждой добавляемой строки, и, таким образом, это не кажется правильным решением.

Так может кто-нибудь помочь мне?

Спасибо

// редактирование:

В то же время я пошел своим путем, чтобы попытаться разобраться, и теперь у меня полный вызов 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();
            }
        });

    });
});

Теперь единственная проблема, с которой я столкнулся, - это удалить 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

Я бы определенно добавил класс в img или tr, а также добавил бы идентификатор, который имеет идентификатор элемента в базе данных

но если вы этого не сделаете, это будет что-то вроде этого

$('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();

Я бы также поместил идентификатор в tr, если вы добавляете идентификаторы, тогда будет $('#id').remove();, чтобы избавиться от tr

Answer 2

Ваша интуиция об этой проблеме оказалась на правильном пути. Вам нужно передать идентификатор базы данных каждой записи и сохранить его где-нибудь в HTML, чтобы вы знали, какое значение передать бэкэнду. Если вы планируете реализовать решение, которое изящно деградирует для пользователей без javascript (обычно это хорошая идея), то вы можете реализовать не-ajax-представление, которое удаляет одну строку. Если ваше приложение использует красивые URL , к этому представлению может обращаться / table / delete / 23 (или любой другой идентификатор). В коде генерации вашей таблицы вы хотите добавить ссылку для каждой строки, которая выглядит следующим образом:

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

На данный момент у вас должно быть хорошо работающее не-JavaScript-решение. Теперь мы можем добавить AJAX. Этот сценарий использует некоторую разбивку строк JavaScript, чтобы извлечь последнюю часть href и превратить ее в идентификатор.

$(".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-запроса, не забудьте очистить ваш ввод !

Answer 3

См. вопрос . Это поможет вам получить индекс строки и столбца ячейки таблицы. Затем выполните Ajax-вызов, чтобы удалить запись из базы данных. В случае успешного обратного вызова удалите строку из таблицы, используя стандартные действия jQuery. Возможно, вы захотите заблокировать доступ к html-странице во время выполнения вызова Ajax. Это не позволит пользователю щелкнуть другое изображение.

Answer 4

Обычно я бы использовал ссылку, а не просто изображение для этой цели. Так как это семантически правильно:

, а затем

$ (". DeleteButton"). Click (function () { var deleteId = $ (this) .attr ("href"). substring (10); // Ajax или URl вызов и т. Д. });

На шаг дальше, я даже не буду помещать изображения в a, просто поместите что-то вроде:

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

и оставьте любое правило стилизации для обработки CSS (например, замена изображения).