在JSP中使用循环创建按钮，每个按钮赋予不同的值

一尘不染

在JSP中使用循环创建按钮，每个按钮赋予不同的值

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">&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>

问题是到循环结束时，我等于9，因此各个按钮的“ i”都丢失了。请帮忙。

阅读 662

2020-06-10

共1个答案

一尘不染

您可以通过更改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">&times;</span>
                <img src="doctor.jpg" alt="Avatar" class="avatar">
            </div>

            <div class="container"><centre>
                <%= "id"+j %>
            </centre></div>


        </div>
    </div>

<%  } %>

我在TutorialsPoint上对其进行了测试，并且似乎工作正常。

2020-06-10