Dynamically Add Table Rows Using JavaScript

Hey Devin,

Maybe I can help! I was looking at your JS code and in your toggle function you are calling the event click. Maybe calling the event change instead? For example:

var toggle = function(checkbox, tablerow) {
  $(checkbox).change(function () {
    // your code
  });
};

It is looking for the check to change to fire off that event and handle the callback function. Also the jquery .toggle is a method to be called on an jQuery object. Since it is a method, and not a property, you will need to end it with () to call the method on the object. For example:

var toggle = function(checkbox, tablerow) {
  $(checkbox).change(function () {
    tablerow.toggle();
  });
};

That should work. However, you rows and checkbox are not aligned numerically so when you click on the first checkbox nothing will happen, but on the rest the rows should go away. Row 5 as of now will always be there.

Hope this helps! If you have more questions let me know, and maybe I can help.

Matt

I will look into a little bit more in depth, but on first pass it appears that some of your code is is the global scope and other parts are in the function callback on the ready event, but it is hard to track the semi-colons and brackets in this form. Try, while I try to figure out more so I can try to help to do something like this:

$(document).ready(function () {

  // All your code goes here

});

Also just putting it in self-executing anonymous function like:

(function (){

  // All your code goes here
})();   

Both ways will keep your JS outside of the global scope. Hope this helps, but I will look into more then just a quick glance.

Great! It works! Thanks so much for your help Matt! One last question. I also want the check all and uncheck all buttons to, well, check and uncheck all of the options. I was thinking of putting each group of variables into an array and running a for each loop, and for each index in the array, if its value is unchecked, and you're pressing the check all button, make it checked. and vice versa. Would that work?

I know I'm asking a lot of you, I was just curious you're much better at this than I am.

No problem! I am glad I can help! Just keep plugin away at JS and the rest will come. Like I said I have had many many many many console errors, and by failing I learned. Also, I am lucky enough to work at a company with really smart developers who have helped me along the way. I have found out (the hard way) learning programing and a language is not a 6 month thing, but a skill that just develops over time by building things that do not work, and figuring how to make them work. Just remember google is a developer's best friend, the most experience guys at my work have to use it sometimes to help them solve a problem. I wish you luck with your job evaluation! If you have more questions let me know, and we can figure it out together!

@Matthew Thank you so much for all your help! I finally got what I was looking for thanks to your help. I added a class of .checked to all of the checkboxes, and I made it so that only the title bar displays when you hit the "Check All" button. Also I changed each button from toggle() to hide() and show() respectively because otherwise whats the point of having two buttons. Here's my final code.

var firstCheckbox = $('#CheckboxGroup1_0');
var secondCheckbox = $('#CheckboxGroup1_1');
var thirdCheckbox = $('#CheckboxGroup1_2');
var fourthCheckbox = $('#CheckboxGroup1_3');
var fifthCheckbox = $('#CheckboxGroup1_4');
var firstRow = $('#row1');
var secondRow = $('#row2');
var thirdRow = $('#row3');
var fourthRow = $('#row4');
var fifthRow = $('#row5');


var toggle = function(checkbox, tablerow) {
  $(checkbox).change(function() {
    tablerow.toggle("slow");
  });
};

toggle(firstCheckbox, firstRow);
toggle(secondCheckbox, secondRow);
toggle(thirdCheckbox, thirdRow);
toggle(fourthCheckbox, fourthRow);
toggle(fifthCheckbox, fifthRow);

$('#checkAll').on('click', function() {
  $('.checked').prop("checked", true);
    $('tr').not("[id='row0']").hide('slow');
});
$('#uncheckAll').on('click', function() {
  $('.checked').prop("checked", false);
  $('tr').not("[id='row0']").show('slow');
});

I'm not going to lie, this was one part of an evaluation for a job in my area, I thought I new JS and jQuery but it was harder than I thought getting the logic down and knowing when and how to use what method. Thankfully you did help in a way where you didn't do everything for me and I was able to figure out a lot and understood everything that you wrote. If you were near Van Nuys, CA I'd have them offer the job to you instead lol.

I appreciate all your help, and I can't wait to keep learning! Finally getting it right was very rewarding. I appreciate all your help!