Удаление строки из динамической HTML-таблицы с помощью jquery - PullRequest
Новая
       33

Удаление строки из динамической HTML-таблицы с помощью jquery

2 голосов
/ 09 ноября 2010

Я сохранил несколько данных из представления в базу данных и добавил их в динамически создаваемую таблицу html, используя jquery в моем приложении asp.net mvc. Сценарий приведен ниже. 

$(document).ready(function() {
    var attributetable = [];
    $("#AddAttrib").click(function(event) {
        event.preventDefault();
        $("#AttributeList").show();
        var attribute = $("#Attribute").val();
        var attributename = $("#Attribute option:selected").text();
        var documentId = $("#DocumentId").val();
        var instructionId = $("#InstructionId").val();

        var attributevalue = $("#text1").val();
        attributetable.push({
            attribute: attribute,
            attributevalue: attributevalue
        });
        var row = $("<tr></tr>");

        var contents = '<tr><td>' + attribute + '</td><td>' + attributename + '</td><td>' + attributevalue + '</td><td><a id="delete" href="#">Delete</a></td></tr>';
        $("#AttributeList").append(contents);

        var jsonToPost = {};
        jsonToPost.attribute = attribute;
        jsonToPost.attributename = attributename;
        jsonToPost.attributevalue = attributevalue;
        jsonToPost.documentId = documentId;
        jsonToPost.instructionId = instructionId;

        jsonToPostString = JSON.stringify(jsonToPost);
        alert(jsonToPostString);
        $.post("/Instruction/CreateInstnAttribute", { data: jsonToPostString });
    });

Мне нужно удалить строку, когда нажата кнопка «удалить». Требуется удалить строку при нажатии на ссылку удаления. как я могу этого достичь? Спасибо за все помогает в до.

1 Ответ

4 голосов
/ 09 ноября 2010

Кажется, вы используете идентификатор "delete" для нескольких строк. Это неверно. Идентификаторы должны быть уникальными. Это должен быть класс вместо этого. 

<td><a class="delete" href="#">Delete</a></td>

Тогда, если AttributeList является вашим <table>, вы можете поместить на него обработчик .delegate() для обработки щелчков по элементам <a>, которые имеют класс "delete". 

$("#AttributeList").delegate('a.delete', 'click', function( e ) {
    e.preventDefault();
    $(this).closest('tr').remove();
});

Поместите это в ваш $(document).ready() звонок.

Этот использует .closest() для получения ближайшего <tr> предка, затем .remove() для удаления строки.

Также использует e.preventDefault(), чтобы отключить поведение по умолчанию для элемента <a>.

...