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
LVL 3
3xtr3m3dAsked:
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.

Pratima PharandeCommented:
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

0
Pratima PharandeCommented:
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

0
gery128Commented:
If you assign id or class to dynamically hide your table columns using JavaScript

refer this link:
http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html
 
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!

3xtr3m3dAuthor Commented:
in my case i need to hide column while print only
0
Pratima PharandeCommented:
this is the comlepte code as you required

Column will hide at the time of print
after printing it will show again
<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;
    }
   // window.print()
  }

		</script>
	</head>
	<body>
		<table width='100%' border='0' id='id_of_table'>
<thead>
<tr>
   <td>ID</td>
   <td>Date</td>
    <td >Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2011-04-05</td>
<td >1</td>
</tr>
</tbody>
</table>
	<A HREF="javascript:show_hide_column(2,false);window.print(); show_hide_column(2,true)">Click to Print This Page</A>

Open in new window

0
gery128Commented:
@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
0
3xtr3m3dAuthor Commented:
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();
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.