Скрытие динамически созданной строки таблицы при клике - PullRequest
Новая
       14

Скрытие динамически созданной строки таблицы при клике

0 голосов
/ 20 мая 2009

В настоящее время я пытаюсь скрыть динамически созданную строку таблицы после нажатия кнопки. До сих пор мне удалось обработать часть динамических функций.

В каждой динамической строке есть кнопки «Отмена» и «Сохранить», мне удалось с легкостью ответить на них. Моя проблема на самом деле работает с самой строкой. 

$(function() {
    $(".add").click(function(){
        // Just append to the table
        $("table#bookmarks tr:first").after("<tr class='new' id='<?php echo rand(1, 9999); ?>'><td></td><td><b>URL:</b> <input type='text' id='newURL' /><br /><b>Title:</b> <input type='text' id='newTitle' /><br /><b>Description:</b><br /><textarea id='newDesc'></textarea></td><td><b>Tags:</b> <input type='text' id='newTags' /></td><td><a href='#' class='save'>Save</a><br /><a href='#' class='cancel'>Cancel</a></td></tr>");
        $('span#links').html('<i style="color: #FF0000">You must reload to recount links!</i>');
        // Actually, the user doesn't want to add another link
        $('.cancel').click(function() {
            $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow");
        });
        // Seems the user wants to add a link!
        $('.save').click(function() {
            $("table#bookmarks tr.new #id").animate({ backgroundColor: "#FFFFFF" }, "fast").animate({ opacity: "hide" }, "slow");
        });
    });

});

Теперь мне нужно скрыть строку, я пробовал всевозможные методы, .parent, .attr, чтобы назвать несколько.

Ответы [ 4 ]

3 голосов
/ 20 мая 2009

Попробуйте объединить в цепочку ваши функции jQuery следующим образом: 

$(function() {
    $(".add").click(function() {
        $("<tr class='new'><td></td><td><b>URL:</b> <input type='text' id='newURL' /><br /><b>Title:</b> <input type='text' id='newTitle' /><br /><b>Description:</b><br /><textarea id='newDesc'></textarea></td><td><b>Tags:</b> <input type='text' id='newTags' /></td></tr>")
            .append($("<td></td>")
                .append($("<a href='#'>Save</a><br/>")
                    .click(function() { $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow"); }))
                .append($("<a href='#'>Cancel</a>")
                    .click(function() { $(this).parents(".new").animate({ backgroundColor: "#FF0000" }, "fast").animate({ opacity: "hide" }, "slow"); })))
            .insertAfter($("table#bookmarks tr:first"));
            $('span#links').html('<i style="color: #FF0000">You must reload to recount links!</i>');
    });
});

(Это измененная версия вашего исходного кода, поэтому он все еще немного запутан.)

2 голосов
/ 20 мая 2009

Вы можете использовать jQuery live, новый с jQuery 1.3.2, для сохранения функции щелчка на динамически создаваемом элементе.

http://docs.jquery.com/Events/live

0 голосов
/ 20 мая 2009

Живая функция jQuery: 

$("#sendmail").live("click", function(){

    // your code goes here  


});

вот пример того, как я его использовал. 

$("#sendmail").live("click", function(){

    $("#emailres").html('<img src="../images/ajax-loader.gif">');
    var youremail = $("#youremail").val();
    var subject = $("#subject").val();
    var message = $("#message").val();

    $.ajax({
    type: 'post',
    url: 'email.php',
    data: 'youremail=' + youremail + '&subject=' + subject + '&message=' + message,

    success: function(results) {
        $('#emailres').html(results);
        }
    }); // end ajax 

});

Чтобы скрыть выбранную строку, сделайте что-то вроде этого:

сначала дайте вашей таблице идентификатор (что-то вроде #mytable) 

$("#cancel_row").live("click", function(){

    $(this).$("#mytable tr").hide();

});

надеюсь, что это поможет вам.

0 голосов
/ 20 мая 2009

Я собрал краткий пример, но, признаюсь, я немного заржавел на jQuery. Этот код, однако, работает, по крайней мере, для меня. 

$(function() {
$(".add").click(function(){
    var save = $("<a href='#' class='save'>Save</a>").click(function() {
        $(this).parent().animate({ backgroundColor: "#FFFFFF" }, "fast").animate({ opacity: "hide" }, "slow")
    })

    var cancel = $("<a href='#' class='cancel'>Cancel</a>").click(function() {
        $(this).parent().animate({ backgroundColor: "#FFFFFF" }, "fast").animate({ opacity: "hide" }, "slow")
    })

    var buttonTD = $("<td></td>");
    buttonTD.append(save);
    buttonTD.append(cancel);

    var row = $("<tr class='new' id='<?php echo rand(1, 9999); ?>'><td></td><td><b>URL:</b> <input type='text' id='newURL' /><br /><b>Title:</b> <input type='text' id='newTitle' /><br /><b>Description:</b><br /><textarea id='newDesc'></textarea></td><td><b>Tags:</b> <input type='text' id='newTags' /></td></tr>")
    .append(buttonTD);
});

});

...