英文:
Creating buttons with a loop in JSP, with each button giving a different value
问题
以下是翻译好的部分：
这里使用循环生成了一个数字表格。表格中的每个值都是一个按钮，当点击按钮时，弹出窗口中会显示该值的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>
<%
//
// 我需要显示 id*10;
//
//
%>
</centre></div>
</div>
</div>
问题在于循环结束时i等于9，因此个别按钮的'i'值丢失。请帮忙。
英文:
Here, a table of numbers is generated with a loop. Each value in the table is a button, which, when clicked, displays 10 times the value in the pop-up. In the actual project, the data is in jsp, so I cannot use javascript.
Please help.
Here is my 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">&times;</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
<%
//
// I need to display id*10;
//
//
%>
</centre></div>
</div>
</div>
The problem is that i equals 9 by the end of the loop, so 'i' of individual buttons are lost.
Please help.
答案1
得分: 0
你可以将整个模态<div>代码写在另一个带有不同id的for循环内，每个按钮的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>
模态框部分：
<% 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上测试过，似乎运行良好。
英文:
You could write the whole modal <div> code inside another for loop with changing ids and the onclick for each button will display its corresponding modal popup.
Here is your 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">&times;</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
<%= "id"+j %>
</centre></div>
</div>
</div>
<% } %>
I tested it on TutorialsPoint and seems to work fine.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论