2009-05-19 10 views
0

Ich versuche gerade, eine dynamisch erstellte Tabellenzeile auszublenden, nachdem eine Schaltfläche gedrückt wurde. Bisher habe ich es geschafft, einen Teil der dynamischen Funktionen zu bewältigen.Eine dynamisch erstellte Tabellenzeile bei Klick ausblenden

Jede dynamische Reihe hat eine "Abbrechen" und "Speichern" Taste, ich habe es geschafft, auf diese mit Leichtigkeit zu reagieren. Mein Problem ist es, mit der Zeile selbst zu arbeiten.

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

}); 

Ich muss jetzt die Reihe verstecken, ich habe alle möglichen verschiedenen Methoden versucht, .parent, .attr ein paar zu nennen.

+0

Was meinen Sie mit "Mein Problem arbeitet tatsächlich mit der Zeile selbst"? Sie verwenden auch den Selektor $ ("table # bookmarks tr.new #id"), aber Sie haben kein Element mit id = "id". – Emmett

+0

Ich weiß, das ist alt, aber für andere, die nicht verstehen können. Sie haben es auf die Nase getroffen, als Sie den Selektor gesagt haben. –

Antwort

3

Versuchen Sie, Ihre jQuery-Funktionen wie das Verkettungs:

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

(. Dies ist eine modifizierte Version des Original-Code, so dass es immer noch ein bisschen chaotisch ist)

+0

Das hat super funktioniert! Danke Emmett! –

2

Sie können jQuery live, neu seit jQuery 1.3.2, verwenden, um die Klickfunktion für ein dynamisch erstelltes Element beizubehalten.

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

+0

Vielen Dank für Ihre Antwort, ich werde versuchen, dies jetzt hinzuzufügen. –

+0

jQuery Live ist eine schöne Sache, aber es unterstützt nicht alle Ereignisse - in Ihrem Fall sollte es in Ordnung sein, da der Klick unterstützt wird, aber für benutzerdefinierte Ereignisse http://docs.jquery.com/Plugins/livequery bietet die gleiche Funktionalität. – Ravi

+0

Ravi, können Sie vorschlagen, wo Sie den Code positionieren und wie er heißen soll? Ich bin mir ziemlich sicher, dass ich die Elemente richtig benannt habe. –

0

ich zusammen warf ein schnelles Beispiel, aber ich gebe zu, ich bin ein bisschen rostig auf jQuery. Dieser Code funktioniert jedoch, zumindest für mich.

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

});

+0

Zu viele dom hängt an. Keine gute wartbare Lösung. – redsquare

+0

Sie haben diesen Post gegraben, wie viele Monate, nachdem er gepostet wurde? Wie viele Anhänge? Ich denke, Sie könnten ein wenig eingerostet sein. – doomspork

+0

buttonTD.append (speichern); buttonTD.append (abbrechen); Sollte auf einmal gemacht werden. Anhängen verursachen ein Neuzeichnen, das die Leistung beeinträchtigt. – redsquare

0

Die jQuery Live-Funktion:

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

    // your code goes here 


}); 

hier ist ein Beispiel dafür, wie ich es benutzen.

$("#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 

}); 

die ausgewählte Zeile auszublenden, etwas tun, wie folgt aus:

ersten Tisch eine ID (so etwas wie #mytable) geben

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

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

}); 

Hoffnung, das Ihnen hilft.

+0

Brilliant, das zeigt mir ein gutes Beispiel für die Verwendung von jQuery live. Danke Ein Hassan! –