• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 498
  • Last Modified:

hide and show columns in a table

i have a hide/show column working in an example. when col # is entered and show or hide button is clicked it hides/shows the column.
i need to do it for multiple columns. if i click on the "show/hide last 10 columns", it should toggle hide and show. pl help.
<html>
<head>
<script> 
  function show_hide_column(col_no, do_show) {
    var stl;
    if (do_show) stl = 'block'
    else         stl = 'none';
    var tbl  = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');
    for (var row=0; row<rows.length;row++) {
    var cels = rows[row].getElementsByTagName('td')
    cels[col_no].style.display=stl;
    }
  }
 
</script>
</head>
<body>
<table id='id_of_table' border=1>
  <tr>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 2</td>
    <td> two</td>
    <td> deux</td>
    <td> zwei</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 3</td>
    <td> three</td>
    <td> trois</td>
    <td> drei</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 4</td>
    <td> four</td>
    <td>quattre</td>
    <td> vier</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 5</td>
    <td> five</td>
    <td> cinq</td>
    <td>f&uuml;nf</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 6</td>
    <td> six</td>
    <td> six</td>
    <td> sechs</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
</table>
<form>
  Enter column no:
  <input type='text' name=col_no size="3">
  &nbsp;
  <input type='button' onClick='javascript:show_hide_column(col_no.value,  true);' value='show'>
  &nbsp;
  <input type='button' onClick='javascript:show_hide_column(col_no.value, false);' value='hide'>
  <br>
  <br>
  <input type='button' onClick='javascript:show_hide_column(col_no.value, false);' value='show/hide last 10 columns'>
</form>
</body>
</html>

Open in new window

0
vidhubala
Asked:
vidhubala
  • 3
  • 3
1 Solution
 
asafadisCommented:
Try this:

I haven't tested this... but it should give you some direction!
// Add a 'number_of_columns' parameter
function show_hide_column(do_show, col_no, number_of_columns) {
 
  // If no 'number_of_columns' is provided, it defaults to 1
  if(number_of_columns == null) number_of_columns = 1;
  
  // Start at the 'col_no' column, and keep hiding the columns on the right
  for(var col=0; col<number_of_columns; col++) {
    var tbl  = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');
 
    for (var row=0; row<rows.length; row++) {
      var cels = rows[row].getElementsByTagName('td')
 
      // Make sure the column exists.
      // Say you have 10 columns, you want to hide 4 of them starting at 8. Cannot compute!
      if(cels[col_no + col]) {
 
        // Notice the '+ col'
        cels[col_no + col].style.display = ((do_show) ? 'block' : 'none');
 
      } else {
 
        // Once you hit the limit... just give up!
        return false;
      }
    }
  }
}

Open in new window

0
 
hieloCommented:
Try this:
<html>
<head>
<script> 
  function show_hide_column(col_no, do_show) {
  
  if( /^\d+$/.test(col_no) )//make sure that col_no is a number
  {
  	return;//otherwise ignore request
  }
    var stl;
    if (do_show) stl = 'block'
    else         stl = 'none';
    var tbl  = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');
    for (var row=0; row<rows.length;row++) {
    	var cels = rows[row].getElementsByTagName('td')
	for( var col=col_no; col < cels.length; ++col) 
    		cels[col].style.display=stl;
    }
  }
 
</script>
</head>
<body>
<table id='id_of_table' border=1>
  <tr>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 2</td>
    <td> two</td>
    <td> deux</td>
    <td> zwei</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 3</td>
    <td> three</td>
    <td> trois</td>
    <td> drei</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 4</td>
    <td> four</td>
    <td>quattre</td>
    <td> vier</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 5</td>
    <td> five</td>
    <td> cinq</td>
    <td>f&uuml;nf</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 6</td>
    <td> six</td>
    <td> six</td>
    <td> sechs</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
</table>
<form>
  Enter column no:
  <input type='text' name=col_no size="3">
   
  <input type='button' onClick='javascript:show_hide_column(col_no.value,  true);' value='show'>
   
  <input type='button' onClick='javascript:show_hide_column(col_no.value, false);' value='hide'>
  <br>
  <br>
  <input type='button' onClick='javascript:show_hide_column(col_no.value, false);' value='show/hide last 10 columns'>
</form>
</body>
</html>

Open in new window

0
 
vidhubalaAuthor Commented:
hi heilo

it didnt work. also i dont need the textbox input as i already know the value. its last 10 columns.

thanks

<html>
<head>
<script> 
  function show_hide_column(col_no, do_show) {
  
  if( /^\d+$/.test(col_no) )//make sure that col_no is a number
  {
  	return;//otherwise ignore request
  }
    var stl;
    if (do_show) stl = 'block'
    else         stl = 'none';
    var tbl  = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');
    for (var row=0; row<rows.length;row++) {
    	var cels = rows[row].getElementsByTagName('td')
	for( var col=col_no; col < cels.length; ++col) 
    		cels[col].style.display=stl;
    }
  }
 
</script>
</head>
<body>
<table id='id_of_table' border=1>
  <tr>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 2</td>
    <td> two</td>
    <td> deux</td>
    <td> zwei</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 3</td>
    <td> three</td>
    <td> trois</td>
    <td> drei</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 4</td>
    <td> four</td>
    <td>quattre</td>
    <td> vier</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 5</td>
    <td> five</td>
    <td> cinq</td>
    <td>f&uuml;nf</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 6</td>
    <td> six</td>
    <td> six</td>
    <td> sechs</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
</table>
<form>
   <input type='button' onClick='javascript:show_hide_column(10-20, false);' value='show/hide last 10 columns'>
</form>
</body>
</html>

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
vidhubalaAuthor Commented:
hi asa,

i tried urs.. its not working. pl take a look.
<html>
<head>
<script> 
  function show_hide_columnOld(col_no, do_show) {
    var stl;
    if (do_show) stl = 'block'
    else         stl = 'none';
    var tbl  = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');
    for (var row=0; row<rows.length;row++) {
    var cels = rows[row].getElementsByTagName('td')
    cels[col_no].style.display=stl;
    }
  }
 
 
 
// Add a 'number_of_columns' parameter
function show_hide_column(do_show, col_no, number_of_columns) {
 
  // If no 'number_of_columns' is provided, it defaults to 1
  if(number_of_columns == null) number_of_columns = 1;
  
  // Start at the 'col_no' column, and keep hiding the columns on the right
  for(var col=0; col<number_of_columns; col++) {
    var tbl  = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');
 
    for (var row=0; row<rows.length; row++) {
      var cels = rows[row].getElementsByTagName('td')
 
      // Make sure the column exists.
      // Say you have 10 columns, you want to hide 4 of them starting at 8. Cannot compute!
      if(cels[col_no + col]) {
 
        // Notice the '+ col'
        cels[col_no + col].style.display = ((do_show) ? 'block' : 'none');
 
      } else {
 
        // Once you hit the limit... just give up!
        return false;
      }
    }
  }
}
</script>
</head>
<body>
<table id='id_of_table' border=1>
  <tr>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 2</td>
    <td> two</td>
    <td> deux</td>
    <td> zwei</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 3</td>
    <td> three</td>
    <td> trois</td>
    <td> drei</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 4</td>
    <td> four</td>
    <td>quattre</td>
    <td> vier</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 5</td>
    <td> five</td>
    <td> cinq</td>
    <td>f&uuml;nf</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
  <tr>
    <td> 6</td>
    <td> six</td>
    <td> six</td>
    <td> sechs</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
    <td> 1</td>
    <td> one</td>
    <td> un</td>
    <td> eins</td>
  </tr>
</table>
<form>
  Enter column no:
  <input type='text' name=col_no size="3">
  &nbsp;
  <input type='text' name=number_of_columns size="3">
  &nbsp;
  <input type='button' onClick='javascript:show_hide_columnOld(col_no.value,  true);' value='show'>
  &nbsp;
  <input type='button' onClick='javascript:show_hide_columnOld(col_no.value, false);' value='hide'>
  <br>
  <br>
  <input type='button' onClick='javascript:show_hide_column(false, col_no.value, number_of_columns.value);' value='show/hide last 10 columns'>
</form>
</body>
</html>

Open in new window

0
 
hieloCommented:
>>i already know the value. its last 10 columns
then all you need is:

<script> 
 
  function show_hide_column() {
 
    var tbl  = document.getElementById('id_of_table');
    var theRows = tbl.getElementsByTagName('tr');
   
    for (var r=0; r<theRows.length;r++) {
    	var cels = theRows[r].getElementsByTagName('td')
 
	for( var c=10; c < cels.length; ++c) 
    	{
		cels[c].style.display= cels[c].style.display=='none' ? '' : 'none';
	}
    }
  }
 
</script>

Open in new window

0
 
vidhubalaAuthor Commented:
works fine. thanks.
0
 
hieloCommented:
You are welcome!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now