i looping list , displaying each item in list.
each item in-turn can have list , need loop them again , show. following code using,
<c:foreach var="i" items="${something.ulist}"> <tr> <td><input type="radio" name="thelist" value="${i.id}"/>${i.number}</td> <td>${i.name}</td> <td>${i.class}</td> <td>${i.date}</td> <c:if test="${not empty i.childs}"> <td><input type="button" value="+" id="link" onclick="showchilds('child');"/></td> </c:if> </tr> <c:if test="${not empty i.childloads}"> <tr id="child"> <c:foreach var="c" items="${i.childloads}"> <td><input type="checkbox" name="thelists" value="${c.id}"/>${c.number}</td> <td>${i.name}</td> <td>${i.class}</td> <td>${i.date}</td> </c:foreach> </tr> </c:if> </c:foreach> when page loads, want hide second loop, given id child, first child hidden others still showing. how hide childs? can create unique id how can pass javascript hide or show depending on user click event?
you can give tr classname of child instead of id of child. can use javascript function document.getelementsbyclassname('child') , use loop style these elements hidden.
<!doctype html> <html> <head> <script> function load() { var elements = document.getelementsbyclassname('child'); for(var i=0; i<elements.length; i++){ elements[i].style.display='none'; } } </script> </head> <body onload="load()"> <table> <tr>trs wont appear below</tr> <tr class="child"><td>child1</td></tr> <tr class="child"><td>child2</td></tr> <tr class="child"><td>child3</td></tr> <tr class="child"><td>child4</td></tr> </table> </body> </html> here fiddle http://jsfiddle.net/nmvrx/2/
to enable hide , show, add iterator class name
ie button like
<td><input type="button" value="+" id="link" onclick="showchilds('child${i}');"/></td> and tr tag this
<tr class="child${i}"> refer make getelementsbyclassname available ie https://stackoverflow.com/a/7410966/1714501
Comments
Post a Comment