Question

我正在创建一个网页（在JSP中），我在Map<?> collections的div中动态加载多行。例如
displayName集合有Name1, Name2, Name3等，每个名称都有自己的属性列表，如attributeList1, attributeList2, attributeList3等。

现在我没有任何问题在下面的div中显示此列表。

Name1 | att1 | att2 | att3 | att4等。所有的att1，att2，att3都是   来自attributeList1的值

Name2 | att1 | att2 | att3 | att4等所有的att1，att2，att3都是   来自attributeList2的值

Name3 | att1 | 3att2 | att3 | att4等所有的att1，att2，att3都是   来自attributeList3的值

Name4 | att1 | 3att2 | att3 | att4等所有的att1，att2，att3都是   来自attributeList4的值

Name5 | att1 | 3att2 | att3 | att4等所有的att1，att2，att3都是   来自attributeList5的值

Name6 | att1 | 3att2 | att3 | att4等所有的att1，att2，att3都是   来自attributeList6的值

现在我想将Name1作为Name2和Name3的父级，以便我想在“Name”（第一列）上放置一个链接，然后在单击Name1，Name2和name3行的链接时将显示或隐藏。类似地，在单击Name4时，将显示或隐藏Name5和Name6 基本上我想使用它们的父子关系动态地对这些行进行分组，并在div中显示子项，以便我可以应用Jquery来切换它们。这里对于Name2和Name3，我有Name1作为parentId作为属性。

请帮帮我。

Answer 1

如果你想隐藏和显示任何元素，那么你可以使用JQuery。例如：

所以我们在这里做的是，我们可以选择任何元素的任何“类”或“id”，并且可以轻松应用隐藏和显示功能。

注意：不要忘记在标题中添加JQuery库。

我希望这会对你有所帮助。

<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>

Answer 2

您需要渲染所有div，以便我们可以找到父div的子项。应该有一些属性来识别子div。

这里我创建了一个div，其中parent div具有name属性，该属性是代码中的第一列值，而其所有子节点都有name属性，其值是父名称属性和常量字符串{{1}的组合最后追加。

_child

这是使用JQuery来切换你的孩子div的JavaScript函数：

<div id="name1Par" name="name1" onclick="hideDiv(this)" style="cursor: pointer;"> Name1 Parent Div </div>
<div name="name1_child"> Name2 Child of Name1</div>
<div name="name1_child">Name3 Child of Name1</div>
<div id="name4Par" name="name4" onclick="hideDiv(this)" style="cursor: pointer;">Name4 Parent div</div>
<div name="name4_child">Name5 Child of Name4</div>
<div name="name4_child">Name6 Child of Name4</div>

您需要如何渲染div或行，以便找到父级的子级。

如果您使用的是表格而不是在调用function hideDiv(ele) { var divName = $(ele).attr("name"); var chilDivName = divName+"_child"; $("[name="+chilDivName+"]").toggle(); }功能的第一列上添加onclick事件，并将您的子行切换为上图所示。

Here is JsFiddle Demo

如何在JSP中为每个循环动态创建div，以便我可以将其切换为隐藏和显示

2 个答案: