Question

I have a jsp page in which there is a html table. The contents of the table will be populated dynamically after reading an xml file. Depending on some data present in the xml file, the number of rows in the table may vary from 2 to 10. Now, there is a checkbox in each row that is displayed in the html table. The id of the checkbox is also dynamically named. Now, I have to write some javascript code which is dependent on all the ids of the the checkboxes that are displayed. How to pass all the ids of the checkboxes that are displayed on the table to the javascript code dynamically?

PS: Im thinking of this approach, please correct me if im wrong. Declare an empty array to hold ids of the checkboxes. As I create each row of the table dynamically using a for-loop, I add the ids of the checkboxes to the array. Now, Im thinking to use this array in the javascript.

Is it possible to access this array in the javascript? If so, How do I pass on this array to the javascript block? Are there any restrictions on where to place this javascript code in the jsp(like after/before the code block where the ids of the checkboxes get added to the array). Im relatively new to this kind of stuff. Pls help on implementing this approach

Answer 1

if I understood you have two possibilities. You could

1. add the id of the checkbox to a javascript array for every iteration on the server-side for loop. So you need to declare an empty js array at the begin of your page , then you add a script block for each checkbox, in which you push the id into the array with <yourarray>.push("<yourid>"). This solution is not really performant (since each <script> block stops the rendering process for a while and you “sow” the code in several places) but technically is working – otherwise

2. at DOM ready (or onload) event you look at the input:checkbox DOM collection, get the id and push it into the array, like so.

   var ids = [],
       cbx = document.querySelectorAll('input[type="checkbox"]');
   
   for (i = 0, l = cbx.length; i < l; i++) {
          ids.push(cbx[i].id);
   }
   
   console.log(ids);
   

Fiddle: http://jsfiddle.net/G44hH/1/ – Of course if you can, it’s better if use this solution (and not the first one)