tables code

This is a little use of dynamic CSS to create expandable, and collapsible sections in data grid presentations.
Cd&
Experts Round Table

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<style type="text/CSS">
   table {
          width:100%; 
          border-collapse:collapse;
          border:2px solid silver;
         }
   tbody {
          display:block
         }
   th {
       font-weight:normal;
       text-align:left;
      }
   td {
       text-align:center;
       padding:8px;
       border:1px solid silver; }
   .linkspan {
              color:gold;
              background-color:blue;
              font-weight:bold;
              text-decoration:none;
              padding:0 2px; 
              font-size:1.2em;
              margin:right:3px;
             }
   .vis {
         display:block;
        }
</style> 

<script type="text/javascript"> 
   var ELpntr=false;
   function hideall()
   {
      locl = document.getElementsByTagName('tbody');
      for (i=0;i<locl.length;i++)
      {
         locl[i].style.display='none';
      }
   }

   function showHide(EL,PM)
   {
      ELpntr=document.getElementById(EL);
      if (ELpntr.style.display=='none')
      {
         document.getElementById(PM).innerHTML=' - ';
         ELpntr.style.display='block';
      }
      else
      {
         document.getElementById(PM).innerHTML=' + ';
         ELpntr.style.display='none';
      }
   }
   onload=hideall;
</script>
</head> 
<body> 
<table>
   <thead>
   <tr class="vis"> <th colspan="3"><a href="#" 
      onclick="showHide('fruit','fruitspan')">
        <span id="fruitspan" class="linkspan"> + </span> Fruit:</a></th></tr>
   </thead> 
   <tbody id="fruit">
      <tr> <td> Apple</td><td> Red</td><td> Shiny</td></tr>
      <tr> <td> Pear</td><td> Green</td><td> Firm</td></tr>
      <tr> <td> Banana</td><td> Red</td><td> Shiny</td></tr>
   </tbody>
</table>
<table>
   <thead>
   <tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('vegtable','vegtablespan')">
        <span id="vegtablespan" class="linkspan"> + </span> Vegtable:</a></th></tr> 
   </thead>
   <tbody id="vegtable">
      <tr> <td> Carrot</td><td> Orange</td><td> Crisp</td></tr>
      <tr> <td> Cucumber</td><td> Green</td><td> Delicious</td></tr>
      <tr> <td> Cauliflower</td><td> White</td><td> Firm</td></tr>
   </tbody>
</table>
<table>
   <thead>
   <tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('animal','animalspan')">
        <span id="animalspan" class="linkspan"> + </span> Animal:</a></th></tr>
   </thead> 
   <tbody id="animal">
      <tr> <td> Cat</td><td> Calico</td><td> Lazy</td></tr>
      <tr> <td> Dog</td><td> Retriever</td><td> Golden</td></tr>
      <tr> <td> Badger</td><td> Muddy</td><td> Mean</td></tr>
   </tbody>
</table> 
</body> 
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript"> function addRow(content,morecontent) { if (!document.getElementsByTagName) return; tabBody=document.getElementsByTagName("TBODY").item(0); row=document.createElement("TR"); cell1 = document.createElement("TD"); cell2 = document.createElement("TD"); textnode1=document.createTextNode(content); textnode2=document.createTextNode(morecontent); cell1.appendChild(textnode1); cell2.appendChild(textnode2); row.appendChild(cell1); row.appendChild(cell2); tabBody.appendChild(row); } </script> </head> <body> <table border='1' id='mytable'> <tbody> <tr><td>22</td><td>333</td></tr> <tr><td>22</td><td>333</td></tr> </tbody> </table> <button onClick='addRow("123","456");return false;'> Add Row</button> </body> </html>

Search DZone Snippets

Popular @ dzone.com

Related Tags

COBOLdinosaur's Tags

Never been to DZone Snippets before?

About this user

Expand and collapse effect for data grids

Add Rows to an HTML table Dynamically