Show/hide TR

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Roger Godefroy
    #1

    Show/hide TR

    Hi There,

    I would like to show details in another (hidden) TR. It should look like
    something like on an image I have found wich illustrates it exactly is I
    want:

    Oracle Software Downloads
    http://otn.oracle.com/tech/blaf/specs/hide_show/hide_show_VIEWdetails_white1.gif
    Access cloud trials and software downloads for Oracle applications, middleware, database, Java, developer tools, and more.


    Is there a sample code to do this? I allready could change the status from a
    hidden tr using:

    function toggle(theElem) {
    document.getEle mentById(theEle m).style.displa y =
    (document.getEl ementById(theEl em).style.displ ay == 'none')?'':'non e';
    }

    But I would like a (sample)code, which changes the + and - and the Hide/Show
    text. Any help appreciated.


    Tags: None
    • Vjekoslav Begovic
      #2
      Re: Show/hide TR

      "Roger Godefroy" <godefroy@(no spam)home.nl> wrote in message
      news:bk99vm$c4n $1@news3.tilbu1 .nb.home.nl...[color=blue]
      > Hi There,
      >
      > I would like to show details in another (hidden) TR. It should look like
      > something like on an image I have found wich illustrates it exactly is I
      > want:
      >
      >[/color]
      http://otn.oracle.com/tech/blaf/spec...ils_white1.gif[color=blue]
      >
      > Is there a sample code to do this?[/color]

      Well, tested on IE6 and Mozilla, this should works:

      <html>
      <head>
      <script type="text/javascript">
      function appendRow(after ){
      var newrow = document.create Element("TR");
      var newcell = newrow.appendCh ild(document.cr eateElement("TD "));
      newcell.setAttr ibute("colSpan" , "7");
      newcell.innerHT ML = "WHATEVER YOU WANT";
      try{
      after.parentNod e.insertBefore( newrow,after.ne xtSibling);
      }
      catch(e){
      after.parentNod e.appendChild(n ewrow);
      }
      }
      function removeRow(thisR ow){
      thisRow.parentN ode.removeChild (thisRow.nextSi bling,true);
      }
      function toogle(evt){
      var evt = evt || window.event;
      var obj = evt.target || evt.srcElement;
      if (!obj.expanded) {
      obj.firstChild. nodeValue = "Hide";
      appendRow(obj.p arentNode);
      }
      else{
      obj.firstChild. nodeValue = "Show";
      removeRow(obj.p arentNode);
      }
      obj.expanded = !obj.expanded;
      }

      function init(){
      var tds = document.getEle mentsByTagName( "TD");
      for (var i=0; i<tds.length; i++){
      if (tds[i].className == "sh"){
      tds[i].expanded = false;
      if (tds[i].addEventListen er)
      tds[i].addEventListen er("click",toog le,false)
      else if (tds[i].attachEvent)
      tds[i].attachEvent("o nclick",toogle) ;
      else tds[i].onclick = toogle;
      }
      }
      }
      onload=init;
      </script>
      <style type="text/css">
      ..sh{
      color:blue;
      cursor:pointer;
      text-decoration:unde rline;
      }
      </style>
      </head>

      <body>
      <table border=1>
      <thead>
      <tr>
      <th>Details</th>
      <th>Line</th>
      <th>Item Description</th>
      <th>Unit</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
      </tr>
      </thead>
      <tfoot>
      <tr>
      <td colspan="6" align="right">T otal</td>
      <td>1,200.00</td>
      </tr>
      </tfoot>
      <tbody>
      <tr>
      <td class="sh">Show </td>
      <td>1</td>
      <td>Some description</td>
      <td>134</td>
      <td>76</td>
      <td>100</td>
      <td>300</td>
      </tr>
      <tr>
      <td class="sh">Show </td>
      <td>2</td>
      <td>Some description</td>
      <td>12</td>
      <td>765</td>
      <td>100</td>
      <td>300</td>
      </tr>
      <tr>
      <td class="sh">Show </td>
      <td>3</td>
      <td>Some description</td>
      <td>32</td>
      <td>43</td>
      <td>100</td>
      <td>300</td>
      </tr>
      <tr>
      <td class="sh">Show </td>
      <td>4</td>
      <td>Some description</td>
      <td>34</td>
      <td>76</td>
      <td>100</td>
      <td>300</td>
      </tr>
      </tbody>
      </table>
      </body>
      </html>

      HTH,

      Vjekoslav


        Comment

        Previous template Next
        Working...