Hi, all
I am completely new to webprogramming
and I am trying to make a table with
expand and collapse feature.
When clicking on each row from table,
the row should expand and display other information below.
I already got partially working,
but this only works for the only the first row of the talble;
whenever i click on the other rows, only the first row expands
and display data.
Is there any one can help me with this issue?
Thanks
<script language="Javascript" type="text/javascript">
function show_hide(objID) {
if(document.getElementById(objID).style.display == 'none'){
document.getElementById(objID).style.display = 'block';
}
else{
document.getElementById(objID).style.display = 'none';
}
}
</script>
<html>
<body>
<table width="500" align="center">
<tr align=center>
<td><b>col1 ID</b></td>
<td><b>col2</b></td>
<td><b>col3</b></td>
</tr>
<%
int i = 0;
while(i<5){
out.println("<tr align=center onclick=\"show_hide(\'event\')\">");
out.println("<td>" + "1" + "</td>");
out.println("<td>" + "2" + "</td>");
out.println("<td>" + "3" + "</td>");
out.println("</tr>");
out.println("<div align=center>");
out.println("<tr align=center id=\"event\" style=\"display:none\">");
out.println("<td>" + "a" + "</td>");
out.println("<td>" + "b" + "</td>");
out.println("<td>" + "c" + "</td>");
out.println("<td>" + "d" + "</td>");
out.println("</tr>");
out.println("</div>");
i++;
}
%>
</body>
</html>