Use [noparse]
tags for php code
[code=html]tags for html code
tags for other code
[/noparse]
And indent your code!
dissy8;11020375 wrote:
<script language="JavaScript">
Please remove 'language="JavaScript"'. There is no language attribute for the script element. And usually when an element is allowed a language attribute, it's limited to natural languages on the form "en" and "en-us".
dissy8;11020375 wrote:
document.getElementById(ctrl).style.display = '';
Even though you use javascript to manipulate the DOM, rather than generate HTML code, there is still a rather direct correspondence. The CSS display attribute can take a few different values, but the empty string '' is not one of them. Should the above still work as you intended, it's due to faulty values usually being replaced by default values. But you can't really say if these are always the same default values in different browsers, and you really should aim for valid code at all levels.
Try 'block';
Moreover, I really recommend getting jQuery and start using it directly. There are far fewer discrepancies between browsers these days, but jQuery still does remove the need to know about those, and there's a good chance your web pages will continue to work for the wayward IE6, IE7 user that comes your way. Using jQuery, the above would be
// jQuery uses the same syntax as CSS does, so to match an id attribute value, you use
// #tr1
$('#'+ctrl).css('display', 'block');
dissy8;11020375 wrote:
<td> [<a href="JavaScript:fncShow('tr<?php echo $i;?>');">Show</a>] [<a href="JavaScript:fncHide('tr<?php echo $i;?>');">Hide</a>]</td>
Generally, if you want to execute javascript code, use buttons, and use their onclick attributes. If you want it to look like a link, restyle the button. But this is usually not recommended, since people expect something looking like a link to be a link and thus to behave like a link. Moreover, when links are clicked, wether you use href or onclick, the this will contain a reference to the window, instead of the link, while when clicking a button, this will contain a reference to the button.
Also note that you will have to solve the problem of "disappearing buttons" if you have the buttons to show rows inside the rows... That is, output those buttons next to the table, or handle mouseovers to temporarily display hidden rows that you are near so you can click to show. Or you could let the user input the row number, if there are ways for them to see the rows. Still, it's quite easy to handle manipulation using jQuery
/* style selector used to hide rows */
tr.poof {
display: none;
}
/* just to pretty things up a little */
input[type="text"] {
width: 2em;
text-align: right;
margin-right: 1em;
}
input.showcontrol {
width: 10em;
}
input.hidecontrol {
width: 5em;
}
input + input {
margin-left: 1em;
}
/* end little pretty */
</style>
<script>
</script>
</head>
<body>
<table id="the_table">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Hide</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<td>11</td>
<td>12</td>
<td>13</td>
<td><input class="hidecontrol" type="button" onclick="$(this).parent().parent().addClass('poof');" value="Hide"></td>
</tr>
<tr id="tr2">
<td>21</td>
<td>22</td>
<td>23</td>
<td><input class="hidecontrol" type="button" onclick="$(this).parent().parent().addClass('poof');" value="Hide"></td>
</tr>
<tr id="tr3">
<td>31</td>
<td>32</td>
<td>33</td>
<td><input class="hidecontrol" type="button" onclick="$(this).parent().parent().addClass('poof');" value="Hide"></td>
</tr>
</tbody>
</table>
<div>
<input class="showcontrol" type="button" onclick="$('#the_table tbody tr').toggleClass('poof');" value="Invert Hidden">
</div>
<div>
<input class="showcontrol" type="button" onclick="$('#the_table tr').removeClass('poof');" value="Show All">
</div>
<div>
<input class="showcontrol" type="button" onclick="$('#tr' + $(this).next().attr('value')).removeClass('poof');" value="Show"><input type="text" value="">
</div>
.
