Here is the code to draw the table:
<div class="table"> <label for="agentsTable"><spring:message code="status.title"/></label> <table class="table table-striped" id="agentsTable"> <thead> <tr> <th scope="col"><spring:message code="operator.callerid"/></th> <th scope="col"><spring:message code="operator.extension"/></th> <th scope="col"><spring:message code="operator.status"/></th> </tr> </thead> <c:forEach items="${operators}" var="queue"> <tr> <th colspan="3"> <input type="checkbox" onClick="showHide('queuesBlock');"/> <spring:message code="queue.number"/> ${queue.key} </th> </tr> <div id="queuesBlock"> <c:forEach items="${queue.value}" var="operator"> <jsp:useBean id="operator" scope="page" type="ru.bityard.model.Exten"/> <tr> <td>${operator.callerid}</td> <td>${operator.exten}</td> <td>${operator.phoneStatus.toString()}</td> </tr> </c:forEach> </c:forEach> </div> </table> </div>
I tried this javascript function:
<script> function showHide (id) { var style = document.getElementById(id).style if (style.visibility == "hidden") style.visibility = "visible"; else style.visibility = "hidden"; } </script>
I wrapped the block I needed in the container <div id="queuesBlock">... </div> , but in my opinion I’m not wrapping it in that container. Tell me how to do it correctly, taking into account the fact that the table is "dialed" dynamically and each checkbox should hide only "its" area? ...