Change table column size

I have a table where the user may want to hide some columns in order to provide more room. I'd like to devise a script that would let them click a given cell (in top row) and have that column collapse to a width of say, 5 px. A 2nd click to that cell would toggle the column back to the original width.

It would probably be necessary to make the text as tiny as possible and change font color to the same as the background color so the cell looks blank.

Any examples of something like this anywhere?

thankx
--steve...
juststeveAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

TyzerCommented:
Hi steve,

here is my idea ..
set up a table with rows and columns which have id's and classes, like this

<tr><td id=col1row1 class=headTD_open>text</td><td id=col2row1 class=headTD_open>text</td><td id=col3row1 class=headTD_open>text</td></tr>

define 2 classes , a 'open' and 'closed' version for your table cells..
start with giving the cells the blabla_open class

for the 'closed' class , set the following, background:#FFFFFF; color:#FFFFFF; overflow:hidden; width:5px;

then add onclick events to the cells in the first row, like this <td id=col1row1 class=headTD_open onclick="javascript:switchcolumnstyle(1)">

and last but not least , create a function which takes the column parameter, and loops through the whole table , and sets the className for every row that it finds with the given column index..
something like this:

function switchcolumnstyle(iCol){
   var aTds = document.getElementsByTagName('TD')
   for (i=0;i<aTDs.length;i++){
   
   }
}



0
TyzerCommented:
hm.. wasn't really finished.. and suddenly i pressed Enter on my keyboard..

.. i was saying ..

something like this:

function switchcolumnstyle(iCol){
   var aTds = document.getElementsByTagName('TD')
   for (i=0;i<aTDs.length;i++){
       if (aTDs[i].id.indexOf('col'+iCol)!=-1){
           if (aTDs[i].className=='headTD_open'){aTDs[i].className='headTD_open'}
           else{aTDs[i].className='headTD_closed'}
       }
   }
}

Goodluck with it ! Tys
0
nightdriveCommented:
Sorry, I can't supply code, as I've never tried it, but I believe you can use the <COL> html element. This is used to provide shortcut to assigning widths and other characteristics (styles) to one or more subsets of columns within a table or within a table's column group (also element <COLGROUP>)
(from O'Reilly's Dynamic HTML)

<table>
   <col id="column1" class="col1class">
   <col id="column2" class="col2class">
   <col id="column3" class="col3class">
   <tr>
       <td></td>
       <td></td>
       <td></td>
   </tr>
etc for multiple rows

This would allow you to access a whole column by id, or change it's class. No js looping!
Try it out on a really simple test table, and see how it goes. As I said, I haven't tried it (yet), but read about for a similar problem in our webdev department.



0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

raj3060Commented:
Try this:
+++++++++++++++++++++++
<script>
function render(c, t) {
 if (c.checked) {
  document.getElementById(t).style.display="block"
 } else {
  document.getElementById(t).style.display="none"
 }
}
</script>

<form>
<input type="checkbox" onclick="render(this, 'hiddenTable')">
<table id="hiddenTable" style="display:none">
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
</form>
+++++++++++++++++++++++++++++
0
raj3060Commented:
Remember you can replace checkbox to a button or a link.
-Raj
0
RozanaZCommented:
<HTML>
<HEAD>
<TITLE></TITLE>

<script>
var narrowWidth="2";
var normalWidth="100";
      function test(ind)
      {
            var tableObj = document.getElementById("myTable");      
            var objRows         = tableObj.rows;
            for (i = 0; i < objRows.length; i++)
            {
                  if (objRows[i].cells[ind].width == narrowWidth)
                  {
                        objRows[i].cells[ind].width=normalWidth;
                  }
                  else if (objRows[i].cells[ind].width == normalWidth)
                  {
                        objRows[i].cells[ind].width=narrowWidth;
                  }
            }
      }      
</script>

<style>
</style>

</HEAD>

<BODY>

<table id="myTable" border="1">
      <tr bgcolor="pink">
            <td width="100px" onClick="test(0)">Cell 1</td>
            <td width="100px" onClick="test(1)">Cell 2</td>            
            <td width="100px" onClick="test(2)">Cell 3</td>
      </tr>
      <tr>
            <td>Cell 11 </td>
            <td>Cell 12 </td>            
            <td>Cell 13 </td>
      </tr>
      <tr>
            <td>Cell 21 </td>
            <td>Cell 22 </td>            
            <td>Cell 23 </td>
      </tr>
      <tr>
            <td>Cell 31 </td>
            <td>Cell 32 </td>            
            <td>Cell 33 </td>
      </tr>
</table>

</BODY>
</HTML>
0
hemebondCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
      <head>
            <title></title>
            <script type="text/javascript">
                  var txt = window.navigator.appName;
                  var ie = (txt == "Microsoft Internet Explorer") ? true : false;
                  var opera = (txt == "Opera") ? true : false;
            </script>
      </head>
      <body>
            <table border="1">
                  <thead>
                        <tr>
                              <th>Column 1</th>
                              <th>Column 2</th>
                              <th>Column 3</th>
                        </tr>
                  </thead>
                  <tbody>
                        <tr>
                              <td>text</td>
                              <td>text</td>
                              <td>text</td>
                        </tr>
                  </tbody>
            </table>
      </body>
      <script type="text/javascript">
            var th = document.getElementsByTagName('th');
            for(var a = 0; a < th.length; a++)
            {
                  if(ie || opera)
                  {
                        th[a].onclick = toggle;
                  }
                  else
                  {
                        th[a].addEventListener('click',toggle,true);
                  }
            }

            var rows = document.getElementsByTagName('tr');
            function toggle(e)
            {
                  var i = (ie) ? this.cellIndex : e.currentTarget.cellIndex;
                  for(a = 0; a < rows.length; a++)
                  {
                        rows[a].cells[i].style.fontSize = (rows[a].cells[i].style.fontSize == '1px') ? '' : '1px';
                  }
            }
      </script>
</html>
0
TyzerCommented:
I've tried Nightdrive's idea, and it works fine !

<html>
<head>

<style>
      .col1class{
            width:200px;
            background:#FF0000;
      }

      .col2class{
            width:50px;
            background:#0000FF;
      }
</style>

<script>

      function fnSwitch(i){
            var oCol = document.getElementById('column'+i)
            if(oCol.className == 'col1class'){
                  oCol.className = 'col2class';
            }
            else{
                  oCol.className = 'col1class';
            }
      }

</script>

</head>

<body>

<table border=1>
   <col id="column1" class="col1class">
   <col id="column2" class="col1class">
   <col id="column3" class="col1class">
   <thead>
      <tr>
                   <th onclick="javascript:fnSwitch(1);">Header 1</th>
              <th onclick="javascript:fnSwitch(2);">Header 2</th>
              <th onclick="javascript:fnSwitch(3);">Header 3</th>
      </tr>
   </thead>
   <tbody>
         <tr>
              <td>cell 1.1</td>
              <td>cell 1.2</td>
              <td>cell 1.3</td>
      </tr>
      <tr>
              <td>cell 2.1</td>
              <td>cell 2.2</td>
              <td>cell 2.3</td>
        </tr>
      <tr>
              <td>cell 3.1</td>
              <td>cell 3.2</td>
              <td>cell 3.3</td>
      </tr>
   </tbody>
</table>

</body>

</html>
0
juststeveAuthor Commented:
Thankx to all!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.