asked on

Hide table column

Hi

How to hide last column of this table?

<table width='100%' border='0'>
<thead>
<tr>
   <th>ID</td>
   <th>Date</td>
    <th>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2011-04-05</td>
<td>1</td>
</tr>
</tbody>
</table>

Open in new window

Thanks

Pratima

you want to hide status column
try this

<table width='100%' border='0' ID="Table1">
<thead>
<tr>
   <th>ID</td>
   <th>Date</td>
    <th style="display:none">Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2011-04-05</td>
<td style="display:none">1</td>
</tr>
</tbody>
</table>

Open in new window

Pratima

If you want to di it through Javascript
see the below example and use it in your code

<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></tr>
  <tr><td>  2</td><td>   two</td><td>   deux</td><td>     zwei</td></tr>
  <tr><td>  3</td><td> three</td><td>  trois</td><td>     drei</td></tr>
  <tr><td>  4</td><td>  four</td><td>quattre</td><td>     vier</td></tr>
  <tr><td>  5</td><td>  five</td><td>   cinq</td><td>f&uuml;nf</td></tr>
  <tr><td>  6</td><td>   six</td><td>    six</td><td>    sechs</td></tr>
</table>


<form ID="Form1">

  Enter column no: <input type='text' name=col_no ID="Text1">
  <br>             <input type='button' onClick='javascript:show_hide_column(col_no.value,  true);' value='show' ID="Button1" NAME="Button1">
                   <input type='button' onClick='javascript:show_hide_column(col_no.value, false);' value='hide' ID="Button2" NAME="Button2">

</form>

Open in new window

ASKER CERTIFIED SOLUTION

gery128

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

3xtr3m3d

ASKER

in my case i need to hide column while print only

SOLUTION

Pratima

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gery128

@pratima_mcs
But this will call only if you click on 'Click to Print This Page'

I would suggest use css for specially printing page, which will be called only on event of printing (either by user's browser or from some link)
Its simple

You can use this:
<link rel="stylesheet" href="print.css" media="print" type="text/css"
Look at media property, this sets print.css to be applied only at the time of printing. So you can hide the columns in print.css.
Reference link:
http://imdsm.blogspot.com/2010/09/detect-printing-with-css-aspnet.html

3xtr3m3d

ASKER

Thanks all for the replies and solutions

i found this solution to hide column with jquery

$("#Table1 thead th:nth-child(3)").hide();
$("#Table1 tbody td:nth-child(3)").hide();