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>