Hide dynamically generated table row by clicking
I am currently trying to hide a dynamically generated table row after a button is clicked. So far I have managed to handle some of the dynamic functions.
Each dynamic line has a "Cancel" and "Save" button, I was able to easily respond to them. My problem actually works with the string itself.
$(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");
});
});
});
I need to hide a row, I've tried all sorts of methods, .parent, .attr to name a few.
0
a source to share
4 answers
Try linking jQuery functions like this:
$(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>');
});
});
(This is a modified version of your original code, so it's still a little messy.)
+3
a source to share
I tossed a quick example together, but I'll admit I'm a little rusty on jQuery. This code, however, works, at least for 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);
});
});
0
a source to share
JQuery live function:
$("#sendmail").live("click", function(){
// your code goes here
});
here is an example of how i used it.
$("#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
});
To hide the selected row, do the following:
first give your table an id (something like #mytable)
$("#cancel_row").live("click", function(){
$(this).$("#mytable tr").hide();
});
hope this helps you.
0
a source to share