Nascondere una riga della tabella creata dinamicamente al clic
-
23-08-2019 - |
Domanda
Al momento sto cercando di nascondere una riga della tabella creata dinamicamente dopo un tasto è stato premuto. Finora sono riuscito a gestire una parte delle funzioni dinamiche.
Ogni riga dinamica ha un pulsante "Annulla" e "Salva", sono riuscito a rispondere a questi con facilità. Il mio problema è in realtà lavorando con la riga stessa.
$(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");
});
});
});
ho bisogno di nascondere l'ora di fila, ho provato tutti i tipi di vari metodi, .parent, .attr per citarne alcuni.
Soluzione
Prova il concatenamento le funzioni jQuery in questo modo:
$(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>');
});
});
(Questa è una versione modificata del codice originale quindi è ancora un po 'confuso.)
Altri suggerimenti
È possibile utilizzare jQuery vivere, Nuovo dal jQuery 1.3.2, per preservare la funzione click su un oggetto creato in modo dinamico.
Ho gettato insieme un esempio veloce, ma devo ammettere che sono un po 'arrugginito su jQuery. Questo codice fa però il lavoro, almeno per me.
$(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);
});
});
La funzione diretta jQuery:
$("#sendmail").live("click", function(){
// your code goes here
});
Ecco un esempio di come l'ho usato.
$("#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
});
Per nascondere la riga selezionata, fare qualcosa di simile:
prima dare il vostro tavolo un id (qualcosa come #mytable)
$("#cancel_row").live("click", function(){
$(this).$("#mytable tr").hide();
});
speranza si può dire.