在JSP中使用循环创建按钮,每个按钮赋予不同的值
在此,通过循环生成数字表。表格中的每个值都是一个按钮,单击该按钮将在弹出窗口中显示该值的10倍。在实际的项目中,数据在jsp中,所以我不能使用javascript。
请帮忙。
这是我的JSP:
<HTML><title> Hi </title>
<%
out.println(" <table border = \"1\" align=\"center\" width='600'>\n" +
" <tr>\n" +
" <th> Number </th>\n" +
" </tr>");
int i;
for(i=0;i<10;i++){
out.println(" <tr>\n" +
" <td style = \"text-align:center\" height=\"40\"> <font style=\"color: black >" + "<button onclick=\"document.getElementById('id01').style.display='block'\" style=\"width:auto; -webkit-box-align: center; \"> " +i+ " </button> </a>" +"</font> </td>\n" +
" </tr> ");
}
%>
</HTML>
DIV:
<div id="id01" class="modal"> <div class="modal-content animate" >
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
<%
//
// I need to display id*10;
//
//
%>
</centre></div>
</div>
</div>
问题是到循环结束时,我等于9,因此各个按钮的“ i”都丢失了。请帮忙。
回答:
您可以通过更改s <div>
在另一个for
循环中编写整个模式代码,id
并且onclick
每个按钮的都会显示其相应的模式弹出窗口。
这是您的JSP:
<HTML><title> Hi </title>
<%
out.println(" <table border = \"1\" align=\"center\" width='600'>\n" +
" <tr>\n" +
" <th> Number </th>\n" +
" </tr>");
int i;
for(i=0;i<10;i++){
out.println(" <tr>\n" +
" <td style = \"text-align:center\" height=\"40\"> <font style=\"color: black >" + "<button onclick=\"document.getElementById('" + "id" + i + "').style.display='block'\" style=\"width:auto; -webkit-box-align: center; \"> " +i+ " </button> </a>" +"</font> </td>\n" +
" </tr> ");
}
%>
</HTML>
DIV:
<% int j=0; for (j=0;j<10;j++){ %>
<div id='<%= "id"+j %>' class="modal">
<div class="modal-content animate" >
<div class="imgcontainer">
<span onclick="document.getElementById('<%= "id"+j %>').style.display='none'" class="close" title="Close Modal">×</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
<%= "id"+j %>
</centre></div>
</div>
</div>
<% } %>
我在TutorialsPoint上对其进行了测试,并且似乎工作正常。
以上是 在JSP中使用循环创建按钮,每个按钮赋予不同的值 的全部内容, 来源链接: utcz.com/qa/425749.html