0

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

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

<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 作为孩子，但只有第一个孩子被隐藏，所有其他人仍在显示。如何隐藏所有的孩子？我可以创建一个唯一的 id，但是如何将它传递给 javascript 以根据用户点击事件隐藏或显示？

4

1 回答 1

1

您可以给该 tr 一个孩子的 className 而不是孩子的 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

于 2013-07-11T15:16:14.367 回答