Show/hide TR

Roger Godefroy · Sep 17, 2003

Hi There,

I would like to show details in another (hidden) TR. It should look like
something like on an image I have found wich illustrates it exactly is I
want:

http://otn.oracle.com/tech/blaf/specs/hide_show/hide_show_VIEWdetails_white1.gif

Is there a sample code to do this? I allready could change the status from a
hidden tr using:

function toggle(theElem){
document.getElementById(theElem).style.display =
(document.getElementById(theElem).style.display == 'none')?'':'none';
}

But I would like a (sample)code, which changes the + and - and the Hide/Show
text. Any help appreciated.

Vjekoslav Begovic · Sep 17, 2003

Roger Godefroy said:
Hi There,

I would like to show details in another (hidden) TR. It should look like
something like on an image I have found wich illustrates it exactly is I
want:

http://otn.oracle.com/tech/blaf/specs/hide_show/hide_show_VIEWdetails_white1.gif

Is there a sample code to do this?

Well, tested on IE6 and Mozilla, this should works:

<html>
<head>
<script type="text/javascript">
function appendRow(after){
var newrow = document.createElement("TR");
var newcell = newrow.appendChild(document.createElement("TD"));
newcell.setAttribute("colSpan", "7");
newcell.innerHTML = "WHATEVER YOU WANT";
try{
after.parentNode.insertBefore(newrow,after.nextSibling);
}
catch(e){
after.parentNode.appendChild(newrow);
}
}
function removeRow(thisRow){
thisRow.parentNode.removeChild(thisRow.nextSibling,true);
}
function toogle(evt){
var evt = evt || window.event;
var obj = evt.target || evt.srcElement;
if (!obj.expanded){
obj.firstChild.nodeValue = "Hide";
appendRow(obj.parentNode);
}
else{
obj.firstChild.nodeValue = "Show";
removeRow(obj.parentNode);
}
obj.expanded = !obj.expanded;
}

function init(){
var tds = document.getElementsByTagName("TD");
for (var i=0; i<tds.length; i++){
if (tds.className == "sh"){
tds.expanded = false;
if (tds.addEventListener)
tds.addEventListener("click",toogle,false)
else if (tds.attachEvent)
tds.attachEvent("onclick",toogle);
else tds.onclick = toogle;
}
}
}
onload=init;
</script>
<style type="text/css">
..sh{
color:blue;
cursorointer;
text-decoration:underline;
}
</style>
</head>

<body>
<table border=1>
<thead>
<tr>
<th>Details</th>
<th>Line</th>
<th>Item Description</th>
<th>Unit</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="6" align="right">Total</td>
<td>1,200.00</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="sh">Show</td>
<td>1</td>
<td>Some description</td>
<td>134</td>
<td>76</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td class="sh">Show</td>
<td>2</td>
<td>Some description</td>
<td>12</td>
<td>765</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td class="sh">Show</td>
<td>3</td>
<td>Some description</td>
<td>32</td>
<td>43</td>
<td>100</td>
<td>300</td>
</tr>
<tr>
<td class="sh">Show</td>
<td>4</td>
<td>Some description</td>
<td>34</td>
<td>76</td>
<td>100</td>
<td>300</td>
</tr>
</tbody>
</table>
</body>
</html>

HTH,

Vjekoslav

show hide divs - show last state upon reload/post	2	Apr 30, 2008
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
Javascript not hiding nested elements simultaneously	2	Apr 5, 2023
Show text on-click with transition	2	Feb 14, 2022
Only one table shows up with the information	2	Mar 29, 2023
Show/Hide div NOT workink in IE	10	Jun 15, 2009
Help with my responsive home page	2	Dec 14, 2022
Show/hide table	2	Oct 25, 2005

Show/hide TR

Roger Godefroy

Vjekoslav Begovic

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads