"Roger Godefroy" <godefroy@(no spam)home.nl> wrote in message
news:bk******** **@news3.tilbu1 .nb.home.nl...
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/spec...ils_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.create Element("TR");
var newcell = newrow.appendCh ild(document.cr eateElement("TD "));
newcell.setAttr ibute("colSpan" , "7");
newcell.innerHT ML = "WHATEVER YOU WANT";
try{
after.parentNod e.insertBefore( newrow,after.ne xtSibling);
}
catch(e){
after.parentNod e.appendChild(n ewrow);
}
}
function removeRow(thisR ow){
thisRow.parentN ode.removeChild (thisRow.nextSi bling,true);
}
function toogle(evt){
var evt = evt || window.event;
var obj = evt.target || evt.srcElement;
if (!obj.expanded) {
obj.firstChild. nodeValue = "Hide";
appendRow(obj.p arentNode);
}
else{
obj.firstChild. nodeValue = "Show";
removeRow(obj.p arentNode);
}
obj.expanded = !obj.expanded;
}
function init(){
var tds = document.getEle mentsByTagName( "TD");
for (var i=0; i<tds.length; i++){
if (tds[i].className == "sh"){
tds[i].expanded = false;
if (tds[i].addEventListen er)
tds[i].addEventListen er("click",toog le,false)
else if (tds[i].attachEvent)
tds[i].attachEvent("o nclick",toogle) ;
else tds[i].onclick = toogle;
}
}
}
onload=init;
</script>
<style type="text/css">
..sh{
color:blue;
cursor:pointer;
text-decoration:unde rline;
}
</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">T otal</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
