设置动态的id或是其他的属性

最新推荐文章于 2022-03-10 00:33:06 发布

原创最新推荐文章于 2022-03-10 00:33:06 发布 · 854 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#SSH #JSP

Java 同时被 3 个专栏收录

22 篇文章

订阅专栏

jsp

9 篇文章

订阅专栏

SSH

3 篇文章

订阅专栏

本文介绍了一个使用JSP和JavaScript实现动态改变表格中单元格背景颜色的例子。具体做法是利用JSP迭代输出表格数据，并在JavaScript中通过循环匹配元素ID来改变其样式。此方法适用于需要动态显示数据及状态的应用场景。

<%int i = 0; %>

<s:iterator value="#session.sel" var="sel">
<input type="text" id="+<%=i++ %>+" value="<s:property value="#sel.value"/>">

</s:iterator>

session.sel这是session种放的list；

下面的这个例子是我做的项目（根据取到的每个值，再将字体背景色改变）：

<div class="adv-table">
<table class="display table table-bordered table-striped" id="example">
<thead>
<tr>
<th class="hidden-phone" style="width: 123px;">设备编号</th>
<th class="hidden-phone">设备型号</th>
<th>序列号</th>
<th>业务用途</th>
<th class="hidden-phone">业务Ip</th>
<th class="hidden-phone">管理Ip</th>
<th class="hidden-phone">服务级别</th>
<th class="hidden-phone">出保日期</th>
<th>系统管理员</th>
<th class="hidden-phone">监控状态</th>
<th class="hidden-phone">可用性</th>
</tr>
</thead>
<tbody>
<%int i = 0; %>
<c:forEach items="${hostList}" var="hostList">
<tr class="gradeX">
<td id="navigation" style="width: 157px;"><a href="/itm/host/${hostList.name }" target="_blank">${hostList.host }</a></td>
<td>${hostList.inventory.software_app_e==null?' ':hostList.inventory.software_app_e }</td>
<td>${hostList.inventory.serialno_a==null?' ':hostList.inventory.serialno_b }</td>
<td>${hostList.inventory.url_a==null?' ':hostList.inventory.url_a }</td>
<td>${hostList.inventory.poc_2_screen==null?' ':hostList.inventory.poc_2_screen }</td>
<td id="navigation">${hostList.inventory.site_notes }</td>
<td>${hostList.inventory.site_rack }</td>
<td class="center hidden-phone">${hostList.inventory.site_country }</td>
<td class="center hidden-phone">${hostList.inventory.poc_2_phone_a }</td>
<td style="text-align: center;">
<c:choose>
<c:when test="${hostList.status =='1'}">
<span class="badge bg-important"> </span>
</c:when>
<c:otherwise>
<span class="badge bg-success"> </span>
</c:otherwise>
</c:choose>
</td>
<td style="text-align: center; width:102px;">

<div id="<%=i%>available" class="font-fourdiv">
<i class="icon-zabbix_unknown font-fouri"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></i>
</div>
<div id="<%=i%>snmp_available" class="font-fourdiv">
<i class="icon-snmp_unknown4 font-fouri"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></span><span class="path7"></span></i>
</div>
<div id="<%=i%>jmx_available" class="font-fourdiv">
<i class="icon-jmx_unknown font-fouri"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
</div>
<div id="<%=i%>ipmi_available" class="font-fourdiv">
<i class="icon-ipmi_unknown font-fouri"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
</div>

</td>
<%i++; %>
</tr>
</c:forEach>
</tbody>

</table>
</div>
</section>
</div>

如下是js部分：

<% int j = 0;%>//这里也设置变量，与jsp的i相对应
<c:forEach items="${hostList}" var="hostList" varStatus="hostext">
<script type="text/javascript">
$(function(){
var available = '${hostList.available}';//foreach循环出来的值
var index = '<%=j%>';
alert("index:"+index);
var div_available= $("#"+index+"available");
if(available==0){
div_available.addClass("font-gray");
} else if(available==1){
div_available.addClass("font-green");
} else{
div_available.addClass("font-red");
}

var snmp_available = '${hostList.snmp_available}';
var div_snmp_available = $("#"+index+"snmp_available");
if(snmp_available==0){
div_snmp_available.addClass("font-gray");
} else if(snmp_available==1){
div_snmp_available.addClass("font-green");
} else{
div_snmp_available.addClass("font-red");
}

var jmx_available = '${hostList.jmx_available}';
var div_jmx_available = $("#"+index+"jmx_available");
if(jmx_available==0){
div_jmx_available.addClass("font-gray");
} else if(jmx_available==1){
div_jmx_available.addClass("font-green");
} else{
div_jmx_available.addClass("font-red");
}

var ipmi_available = '${hostList.ipmi_available}';
var div_ipmi_available = $("#"+index+"ipmi_available");
if(ipmi_available==0){
div_ipmi_available.addClass("font-gray");
} else if(ipmi_available==1){
div_ipmi_available.addClass("font-green");
} else{
div_ipmi_available.addClass("font-red");
}

});
</script>
<% j=j+1;%>
</c:forEach>