java - 如何在innerHTML中编写Java代码

Question

我的要求如下。

1. 每当用户单击“添加项目”按钮时，都应在表中添加一个新行。(表名称:additionalInfoTable)。
2. 必须包含三个单元格。
3. 前两个单元格必须有文本字段。
4. 第二个单元格必须包含包含值列表的下拉菜单。

为此，我用 Javascript 编写了如下代码。但是当我从 Java ArrayList 生成下拉值时，Java 代码片段没有在 InnerHTML 中运行。

function addAdditionalRow() {
        var table = document.getElementById("additionalInfoTable");
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);

        cell1.innerHTML =   '<input type="text" size="15" name="additionalCost" />';
        cell2.innerHTML =   '<input type="text" size="15" name="totalCost" />';
        cell3.innerHTML =   '<select name="recoveryType">'+                             
                            '<option>--Select Recovery Type--</option>';

                            <% for(String recType: details.getRecoveryTypeList()) { %>
                            var recType = '<%=recType%>';
        cell3.innerHTML =   '<option value="'+recType+'">'+recType%+'</option>';
                            <%}%>

        cell3.innerHTML =   '</select>';    
      cell4.innerHTML =     '<input type="button" value="Delete" onclick="deleteRow(this)"/>';  
    }

我的表 JSP 代码如下。

<table border ="1" width="100%" id="additionalInfoTable">
<thead>
    <tr>
        <td align="center" ><b>Additional Cost $</b></td>
        <td align="center" ><b>Total Cost</b></td>
        <td align="center" ><b>Recovery Type</b></td>
        <td align="center" ><b>Delete</b></td></tr>

    </tr>
</thead>        
    <tbody id="addBillbackdata">
        <tr>
            <td align="center">
              <input type="text" size="15" name="additionalCost" />
            </td>
            <td align="center">
              <input type="text" size="15" name="totalCost" />
            </td>
                <select name="recoveryType">
                    <option>--Select Recovery Type--</option>
                    <% for(String recType: details.getRecoveryTypeList()) { %>
                    <option value="<%=recType%>"><%=recType%></option>
                    <%}%>
                </select>
            </td>
            <td align="center">
              <input type="button" value="Delete" onclick="deleteRow(this)"/>
            </td>
        </tr>
    </tbody>
</table>

请帮我获取 javascript 的innerHTML 中的Java ArrayList 值

Answer 1

您的 JavaScript 会修改浏览器中的 HTML。 JSP 代码在传递到浏览器之前先在服务器端编译。在javascript中不可能使用JSP代码，因为浏览器无法解释它。你必须要么

• 使用 jsp 创建所需的 html，隐藏它(例如使用 display:none )，然后使用 javascript 动态附加它
• 在 <script> 内的 jsp 中创建全局 javascript 变量-从按钮回调中标记并引用它
• 创建不同的 jsp 或 servlet 来传递数据并使用 AJAX 来请求