Show, Hide Rows In HTML

   <-- click here

parent A

child 1

child 2

parent B

child 3

child 4

parent C

child 5

child 6

One button, one function, one class name . . .

. . . no style sheets, no frameworks, no Adobe, no Silverlight, no HTML5, no baggage!

What does this have to do with SQL Anywhere?

For you, maybe nothing, maybe a lot, more on that later.

But first, the code:

<script Language="JavaScript"> 
   function showHideTrs ( buttonObject ) { 
      var trs = document.getElementsByClassName ( 'showHideTr' );
      var trCounter = trs.length;
      if ( buttonObject.value == "Show" ) {
         while ( trCounter-- ) {
            trs [ trCounter ].style.display = "table-row";
         }
         buttonObject.value = "Hide"; 
      } 
      else { 
         while ( trCounter-- ) {
            trs [ trCounter ].style.display = "none";
         }
         buttonObject.value = "Show"; 
      } 
   } 
</script> 
<input type="button" value="Hide" onClick="javascript:showHideTrs ( this );" STYLE="font-size: 10pt; text-decoration:underline; cursor:pointer; background-color: #E6E6E6; border-width: 0; ">
<table>
<tr><td>parent A</td></tr>
<tr class="showHideTr"><td>child 1</td></tr>
<tr class="showHideTr"><td>child 2</td></tr>
<tr><td>parent B</td></tr>
<tr class="showHideTr"><td>child 3</td></tr>
<tr class="showHideTr"><td>child 4</td></tr>
<tr><td>parent C</td></tr>
<tr class="showHideTr"><td>child 5</td></tr>
<tr class="showHideTr"><td>child 6</td></tr>
</TABLE> 

• The HTML input button on line 19 calls the JavaScript function showHideTrs() defined on line 2.
  

• The var trs on line 3 creates an array filled by calling the builtin getElementsByClassName() function which returns all the HTML elements on the page that have class="showHideTr".
  

• The CSS class="ShowHideTr" attribute is specified for all the TR elements that are used to show child rows; i.e, lines 22 and 23, 25 and 26, etc.
  

• There's no actual CSS class selector definition for the "ShowHideTr" class, it's just a name given to a bunch of TR elements so that getElementsByClassName() can find them all.
  

• The rest of the code on lines 4 through 16 serves to switch the CSS display property between "none" and "table-row" (normal for a TR), as well as switching the button's visible value between "Hide" and "Show".
  

What about SQL Anywhere?

SQL Anywhere's builtin HTTP server can be used to directly display tables and rows via HTML, and sometimes the amount of data can be overwhelming, hence the desire for a "show hide" button.

OK, ok, it's all about Foxhound :)... the new Connection History page shows all the data collected for one connection every 10 seconds, including the SQL statement and the execution plan, and the result is the very definition of "overwhelming":



Sure, it's got "Show More / Show Less" buttons on the Last Statement and Last Plan Text lines, but it needs another button to make those lines disappear altogether: