?
Solved

Change table column size

Posted on 2004-10-13
9
Medium Priority
?
365 Views
Last Modified: 2012-05-05
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...
0
Comment
Question by:juststeve
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 3

Expert Comment

by:Tyzer
ID: 12297540
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
 
LVL 3

Expert Comment

by:Tyzer
ID: 12297583
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
 

Accepted Solution

by:
nightdrive earned 600 total points
ID: 12298221
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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 11

Assisted Solution

by:raj3060
raj3060 earned 200 total points
ID: 12298273
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
 
LVL 11

Expert Comment

by:raj3060
ID: 12298284
Remember you can replace checkbox to a button or a link.
-Raj
0
 
LVL 8

Assisted Solution

by:RozanaZ
RozanaZ earned 400 total points
ID: 12298334
<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
 
LVL 3

Assisted Solution

by:hemebond
hemebond earned 400 total points
ID: 12316532
<!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
 
LVL 3

Assisted Solution

by:Tyzer
Tyzer earned 400 total points
ID: 12327351
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
 

Author Comment

by:juststeve
ID: 12574540
Thankx to all!
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question