By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,950 Members | 1,005 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,950 IT Pros & Developers. It's quick & easy.

Show and Hide Table Column related to checked checkboxes

P: 25
Hi!

I have a multiple selection of checkboxes

[HTML]<input type='checkbox' name='coffee' id='col1' value='Address'/>
<input type='checkbox' name='coffee' id='col2' value='Name'/>
<input type='checkbox' name='coffee' id='col3' value='ID'/>
<input type='checkbox' name='coffee' id='col4' value='UserName'/>
<input type='checkbox' name='coffee' id='col5' value='Code'/>
[/HTML]
Want to store them in array. On submit of button.
Then hide and show the table column with respect to selection of checkboxes. i.e. selected checkbox will show that columns in table resat will hide.

[HTML]<td id="col1">Address</td>
<td id="col2">Name</td>
<td id="col3">ID</td>
<td id="col4">UserName</td>
<td id="col5">Code</td>[/HTML]

thus if checkbox for "Name" and "ID" are checked than it will show the Columns only for "Name" and "ID" rest will hide but will be done on submit of the button
Feb 11 '08 #1
Share this Question
Share on Google+
13 Replies


ronverdonk
Expert 2.5K+
P: 4,258
For a correct interpretation your ID's must be unique. In IE you will get away with it (most of the time) but not in FF.

ROnald
Feb 11 '08 #2

P: 25
How can i proceed with the code for the same with the modified id for table cell ie. tcol1, tcol2.
[HTML]<form>
<input type='checkbox' name='coffee' id='col1' value='Address'/>
<input type='checkbox' name='coffee' id='col2' value='Name'/>
<input type='checkbox' name='coffee' id='col3' value='ID'/>
<input type='checkbox' name='coffee' id='col4' value='UserName'/>
<input type='checkbox' name='coffee' id='col5' value='Code'/>
<input type='button' onclick='show()' value='Save'>
</form>

<td id="tcol1">Address</td>
<td id="tcol2">Name</td>
<td id="tcol3">ID</td>
<td id="tcol4">UserName</td>
<td id="tcol5">Code</td>
[/HTML]
Onclick on Save button I should be able to store the checked checkbox an then show the related columns in table, rest hidden. In next cycle the modified checked checkboxes again stored new one and previous cleened and thus the show respected column.
Feb 12 '08 #3

acoder
Expert Mod 15k+
P: 16,027
You might not even need JavaScript for this if you're going to submit the form. Is the page going to be refreshed?
Feb 12 '08 #4

P: 25
Yes need to refresh the page, thus only current set of the checkboxs will be stored on Save Button Clicked. Thus showing thoes colums only
Feb 12 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Does this need to be done in JavaScript or will any language do?
Feb 12 '08 #6

P: 25
it should be done with Javascript.
Feb 12 '08 #7

acoder
Expert Mod 15k+
P: 16,027
Then, in that case, it'd be better if this was done without refreshing the page, e.g. on clicking the checkbox.
Feb 12 '08 #8

P: 25
It is already available at

http://www.fiendish.demon.co.uk/html...tablecols.html
Feb 12 '08 #9

acoder
Expert Mod 15k+
P: 16,027
So does that solve your problem?
Feb 12 '08 #10

P: 25
this does not solve my problem,

as i had an Edit Button onclick it show and hide a div, which has all the checkboxes with submit button.

With tabuler columns.

Once we select the checkboxes Click on Submit Button then store all the checked checkboxes and hide the div

then the stored checkboxes show the respective column in ntable.

Again on Click Edit it should show all the checked checkboxes, if we edit them then we have to submit it again else it will show the same as previous.

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2.  
  3. var  fieldsArray = new Array();
  4.  
  5.  
  6. var showMode = 'table-cell';
  7. if (document.all) showMode='block';
  8. function show()
  9. {
  10.  
  11.     fieldsArray= new Array();
  12.     txt="";
  13.     cells="";
  14.     {
  15.     coffee=document.forms[0].coffee;
  16.     for (i=0;i<coffee.length;++ i)
  17.         {
  18.         if (coffee[i].checked)
  19.             {
  20.             txt=txt + coffee[i].id;
  21.             btn = 't'+ coffee[i].id;
  22.             cells = cells + btn;
  23.             fieldsArray[i]=btn;
  24.             }
  25.  
  26.         }
  27. toggleview('div1');
  28.     }
  29. mode = coffee.checked ? showMode : 'none';
  30. }
  31. function toggleview(element1)
  32. {
  33. element1 = document.getElementById(element1);
  34. if (element1.style.display == 'block' || element1.style.display == '')
  35. element1.style.display = 'none';
  36. else
  37. element1.style.display = 'block'; 
  38. }
  39. </script>
Not able to complete the Full funcnality as need you help on it.
Feb 12 '08 #11

acoder
Expert Mod 15k+
P: 16,027
Again on Click Edit it should show all the checked checkboxes, if we edit them then we have to submit it again else it will show the same as previous.
So, if I understand correctly, this is where the problem lies. If you don't submit, it won't be updated. Is that correct? If not, could you show the code that you call when clicking Edit.
Feb 13 '08 #12

P: 25
Yes you got the problem, the code on Edit is

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function toggleview(element1)
  3. {
  4. element1 = document.getElementById(element1);
  5. if (element1.style.display == 'block' || element1.style.display == '')
  6. element1.style.display = 'none';
  7. else
  8. element1.style.display = 'block'; 
  9. }
  10. </script>
Feb 13 '08 #13

acoder
Expert Mod 15k+
P: 16,027
So how do call this function?

PS. please use code tags when posting code. Thanks!
Feb 13 '08 #14

Post your reply

Sign in to post your reply or Sign up for a free account.