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?
 
gery128Connect With a Mentor Commented:
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
 
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
3xtr3m3dAuthor Commented:
in my case i need to hide column while print only
0
 
Pratima PharandeConnect With a Mentor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.