Member Avatar for tonyibrahim

Hello, i have a table with 3 columns, and i have a click bottom on the first column, when i click the 1st column should take the 100% of the table width and the other 2 columns should disappear, then when i click the bottom again, everything should take the origin size, how can i do it?

  • 2 Contributors
  • 1 Reply
  • 79 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

Using DOM tree method, you will be able to peform this requirements.

Here's a simple demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html id="html40L" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--

-->
</style>
<script type="text/javascript">
<!--

var resize = function() {
   var table = (( "getElementById" in document ) ? document.getElementById( "myTable" ) : document.all.myTable );
   var row = table.rows;
   for ( var x = 0; x < row.length; x++ ) {
   var cel = row[ x ].cells;
      for ( var y = 0; y < cel.length; y++ ) {
      cel( y ).align = "center";
      cel( y ).onclick = function() {  
         if ( this.style.width !== "100%" ) {
      (( !this.previousSibling ) ? this.parentNode.lastChild.style.display = "none" : null );
      (( !this.nextSibling ) ? this.parentNode.firstChild.style.display = "none" : null );
         this.style.width = "100%";
         this.setAttribute( "colspan", y ); 
             if ( this.previousSibling ) { this.previousSibling.style.display = "none";
             } if ( this.nextSibling ) { this.nextSibling.style.display = "none";
             }
         } else {
      (( !this.previousSibling ) ? this.parentNode.lastChild.style.display = "table-cell" : null );
      (( !this.nextSibling ) ? this.parentNode.firstChild.style.display = "table-cell" : null ); 
         this.style.width = "auto";
         this.removeAttribute("colspan"); 
         if ( this.previousSibling ) { this.previousSibling.style.display = "table-cell";
         } if ( this.nextSibling ) { this.nextSibling.style.display = "table-cell";
         } 
      }      
   }; 
      }
   }
};
window.onload = resize;
// -->
</script>
</head>
<body>
<div id="main">
<table width="100%" cellpadding="4" border="1" id="myTable" frame="box" rules="all">
<tr>
<td>R1CELL #1</td>
<td>R1CELL #2</td>
<td>R1CELL #3</td>
</tr>
<tr>
<td>R2CELL #1</td>
<td>R2CELL #2</td>
<td>R2CELL #3</td>
</tr>
<tr>
<td>R3CELL #1</td>
<td>R3CELL #2</td>
<td>R3CELL #3</td>
</tr>
</table>
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.