在js里通过id控制表或div的隐藏和显示,以及把id前缀相同的div全部隐藏起来

最新推荐文章于 2024-01-12 14:15:34 发布

原创最新推荐文章于 2024-01-12 14:15:34 发布 · 1.9w 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用JavaScript通过id来控制表格或Div的显示和隐藏，并展示了如何一次性隐藏所有id前缀相同的Div元素。示例代码中，当点击特定按钮时，会显示特定id的表格和Div，同时隐藏所有‘adds_’前缀的Div元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过动态的id控制表或div的隐藏和显示
function titles(Obj){
var k=Obj;
var qian="add_";
var ids=qian+k;
var ids2='#'+ids;
var ids3='"'+ids2+'"';
$("#adds_"+k+"").attr("style","display:show();");
$("#maintable").attr("style","display:none;");

}

把id前缀相同的div全部隐藏起来：

function fanhui(){
$("#maintable").attr("style","display:show();");
$("#queryForm").attr("style","display:show();");
$("#main").attr("style","display:show();");
$(".adds").attr("style","display:none;");
}

<c:forEach items="${workNewsList}" var="item">
<div id="adds_${item.id}" class="adds" style="width:98.5%;height:100%; background: #ffffff; overflow: auto; text-align: center;display:none;">
<form action="editReservoir.do" method="post" id="add_form_${item.id}">

<table style="width: 100%;" id="listTable">
<thead>
<tr>
<th style="display: none;">ID</th>
<th align="left">标题111</th>
<th>时间111</th>
<th width="150px">操作111</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display: none;">${item.id}</td>
<td style="display: none;">${item.title}</td>
<td align="left">${item.title}</td>
</tr>
<tr>
<td>${item.createTime}</td><td>${item.createUser}</td>
</tr>
<tr>
<td>${item.htmlContent}</td>
</tr>
<td align="center">
<div style="width: 120px;">
<input name="pub" type="button" id="pub" value=" 返回标题 " onclick="fanhui();" style="background-color:#DEEAF9;border-color:#3C8ECE;border-width:1px;color:#7089E6"/>
</div>
</td>
</tr>

</tbody>
</table>
</div>
</c:forEach>