469,900 Members | 1,640 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,900 developers. It's quick & easy.

Show and Hide Table Column related to checked checkboxes

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
13 7217
ronverdonk
4,258 Expert 4TB
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
rupak
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
16,027 Expert Mod 8TB
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
rupak
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
16,027 Expert Mod 8TB
Does this need to be done in JavaScript or will any language do?
Feb 12 '08 #6
rupak
25
it should be done with Javascript.
Feb 12 '08 #7
acoder
16,027 Expert Mod 8TB
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
rupak
25
It is already available at

http://www.fiendish.demon.co.uk/html...tablecols.html
Feb 12 '08 #9
acoder
16,027 Expert Mod 8TB
So does that solve your problem?
Feb 12 '08 #10
rupak
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
16,027 Expert Mod 8TB
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
rupak
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
16,027 Expert Mod 8TB
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.

Similar topics

2 posts views Thread by MOHSEN KASHANI | last post: by
4 posts views Thread by jerryyang_la1 | last post: by
2 posts views Thread by avanti | last post: by
8 posts views Thread by Axelar | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.