Question

我正在循环列表并显示列表中的每个项目。

每个项目都可以有一个列表，我需要再次循环它们并显示。以下是我正在使用的代码，

<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>

当页面加载时，我想隐藏第二个循环，给定id为child，但只隐藏第一个子节点，其他所有子节点仍然显示。如何隐藏所有孩子？我可以创建一个唯一的ID但是如何根据用户点击事件将其传递给javascript来隐藏或显示？

Answer 1

你可以给那个tr一个className的child而不是id的id。然后，您可以使用执行document.getElementsByClassName（'child'）的javaScript函数，并使用for循环将这些元素设置为隐藏。

 <!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>

这是小提琴 http://jsfiddle.net/nMVrX/2/

要启用隐藏和显示，请将迭代器i添加到类名

即您的按钮就像

<td><input type="button" value="+" id="link" onclick="showChilds('child${i}');"/></td>

你的tr标签看起来像这样

<tr class="child${i}">

引用此命令使getElementsByClassName可用于IE https://stackoverflow.com/a/7410966/1714501

需要使用具有唯一ID的两次forEach循环

1 个答案: