I am working on dynamically allowing a user to add or remove table rows which contain form fields.
there are two main issues I am having- which entail being able to use a selector to capture the second element of a table (in hopes of ignoring the header row)
and second working with jQuery and the disabled attribute. When calling it initially I cannot change the attribute there after with a js if statement.
my code is here for review: http://jsfiddle.net/Jcortes/BE5Lr/792/
If anyone could help it’d be appreciated.
$(document).ready(function() {
$('#DelBtn').attr('disabled', 'disabled');
var count = 1;
//*******************************************************************
$('#AddBtn').click(function() {
//problem is below, the selector is not returning the other elements. (ex=second)
$("table tr:first").clone().find("input").each(function() {
$(this).val('').attr('id', function(_, id) {
return id + count;
});
}).end().appendTo("table");
count++;
if (count == 2) {
$('#DelBtn').attr('disabled', '');
}
if (count == 5) {
$('#AddBtn').attr('disabled', 'disabled');
}
}); //end AddBtn Function
//*******************************************************************
$('#DelBtn').click(function() {
$("table tr:last").remove();
count--;
if (count == 1) {
$('#DelBtn').attr('disabled', 'disabled');
$('#AddBtn').attr('disabled', '');
}
}); //end DelBtn Function
//*******************************************************************
}); //end DOM Ready
The reason the
attr('disabled', '')call fails i because you are using jQuery 1.7. jquery 1.7 now properly differentiates between attributes and properties. Disabled is a property. Use the .prop() method instead.Ah, I see second problem now. You can use nth-child selector to get second row.
http://jsfiddle.net/BE5Lr/793/