Css, Js and <tr>
Why is it the simple css/xhtml code takes the longest problems to solve sometimes.
I've been creating a table and for each table row there is a hidden row (<tr>) which spans the 13 columns. The idea is that when you click on the row the table expands to shows the hidden <tr> and pull in data via Ajax about that record.
Initially i was using the following css to hide the row
1display:none;
This is fine for IE and Firefox when it comes to hiding a table row but when you then apply "display:block" to bring the row back IE renders it fine, but Firefox doesnt quite get it right. This is because you need to use:
1display:table-row
I've test this in both IE 7 (beta) and FF and all seems fine, I will hopefully try this in some other browsers when I get back home.
Comments
the trick is, from memory, to grab the current display property for a visible row and then use that value to set the property to display again
z
z
i have a other solution
because in firefox display:block doesn't work. i allways pass the status of a other row
example:
<InvalidTag language="javascript" type="text/javascript">
function FuncShowHide(){
if (document.getElementById('hideShow').style.display == document.getElementById('trX').style.display){
document.getElementById('hideShow').style.display = "none";
} else {
document.getElementById('hideShow').style.display = document.getElementById('trX').style.display
}
}
</script>
<table>
<tr id="trX" onClick="FuncShowHide()">
<td>text</td>
</tr>
<tr id="hideShow" style="display:none">
<td>Hide / Show this Row</td>
</tr>
</table>
because in firefox display:block doesn't work. i allways pass the status of a other row
example:
<InvalidTag language="javascript" type="text/javascript">
function FuncShowHide(){
if (document.getElementById('hideShow').style.display == document.getElementById('trX').style.display){
document.getElementById('hideShow').style.display = "none";
} else {
document.getElementById('hideShow').style.display = document.getElementById('trX').style.display
}
}
</script>
<table>
<tr id="trX" onClick="FuncShowHide()">
<td>text</td>
</tr>
<tr id="hideShow" style="display:none">
<td>Hide / Show this Row</td>
</tr>
</table>
IE doesn't support the table-row value and throws JS error when you try to use it.
http://msdn.microsoft.com/workshop/author/dhtml/re...
What I've done in this case is wrap it in try/catch and fall back to 'block' in IE.
try {
trObj.style.display = 'table-row';
} catch (e) {
trObj.style.display = 'block';
}
http://msdn.microsoft.com/workshop/author/dhtml/re...
What I've done in this case is wrap it in try/catch and fall back to 'block' in IE.
try {
trObj.style.display = 'table-row';
} catch (e) {
trObj.style.display = 'block';
}
