Table expand/collapse, only parse underlying code if expanded

Hi there, I have a bit of sample code here (with javascript doing the work) that will expand specific rows of a table, or indeed an entire table when the toggle row display button is pressed.

However by pressing the button, it just makes the rows visible/invisible, the underlying code has already been processed when the page is loaded… What Im hoping to do is be able to click on this button and it then goes off “at that point” and does a database query (using PHP) to populate the table that appears. I dont want the page to process said query when the page loads initially, only when prompted by the button which in turn displays the table

Does anybody know if javascript can prevent the markup from being parsed until the button is pressed? or will it always run through the code ?

i will have a relatively complex DB call within this section and i dont want to have it run every time the page is loaded, only when the user wishes to see it (presses the button)

here is an example piece of html/js that can be run directly.

any help on this would be greatly appreciated

<html>
<head>
    <title>Untitled</title>
</head>


<script type="text/javascript">

var rowVisible = false;

function toggleDisplay(tbl) {
   var tblRows = tbl.rows;
   for (i = 1; i < tblRows.length; i++) {
      if (tblRows[i].className != "headerRow") {
         tblRows[i].style.display = (rowVisible) ? "none" : "table-row";
      }
   }
   rowVisible = !rowVisible;
}

</script>

<style type="text/css">

table#theTable tr {
   display:none;

}

table#theTable tr.headerRow {
   display:table-row;

}

</style>

<body>

<table border="1">
<tr>
<td>	
<table id="theTable" border="0">
   <tr class="headerRow">
      <th>test header</th>
      <th>test header</th>
      <th>test header</th>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
</table>
</td>
<td>
<input type="button" value="toggle row display" onclick="toggleDisplay(document.getElementById('theTable'))" />
</td>
</tr>
<tr>
	<td>
		i am some more data
	</td>
</tr>	
</table>
</body>

</html>

You will be wanting to use Ajax to achieve that.

It’s fairly complex to approach it on its own, but books like Bulletproof Ajax help, and even provide [url=“http://bulletproofajax.com/code/”]code for you.

Otherwise, you could also look in to using a library to help, such as jQuery’s Ajax