如何使用struts2和JSP在JSP页面中添加动态行和插入值？答案

【问题标题】：How to add dynamic row and insert values in JSP page using struts2 and JSP?如何使用struts2和JSP在JSP页面中添加动态行和插入值？
【发布时间】：2013-11-18 22:11:52
【问题描述】：

我能够在 JSP 页面中使用 Struts2 和 Hibernate 显示所有表的（“Products(id, name)”）数据。但我想添加一个功能。应该有一个按钮（如“添加新行”），单击该按钮将在表格末尾添加一个新行，它将提供添加值以保存的选项。

为此，我尝试了这样的jsp页面：

<table>
    <tr>
        <th>Name</th>
        <th>EntryDate</th>
    </tr>

    <s:iterator value="productList">        
    <tr>
        <td> <s:textfield name="Name" /></td>
        <td> <sj:datepicker name="EntryDate" displayFormat="ymmdd" maxlength="6" /> </td> 
    </tr>   
    </s:iterator>
    <tr>
        <td><button type="button" onclick="addNewRow(this.parentNode);">Add new row </button> </td>
    </tr>
</table>

我尝试使用 javascript 来实现这一点。但我失败了。任何人都可以有任何建议如何做到这一点。

【问题讨论】：

看看这个w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow

标签： hibernate jsp struts2 struts

【解决方案1】：

使用以下代码

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="functions.js"></script>
</head>
<body>
    <button id="btnAddd”>New</button>
    <table id="tblData">         
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>


function Add(){
    $("#tblData tbody").append(
        "<tr>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><img src='images/disk.png' class='btnSave'><img src='images/delete.png' class='btnDelete'/></td>"+
        "</tr>");

        $(".btnSave").bind("click", Save);     
        $(".btnDelete").bind("click", Delete);
};


$(function(){
    //Add, Save, Edit and Delete functions code
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
    $("#btnAdd").bind("click", Add);
});

Source 看看Link

【讨论】：

错字： :)

【解决方案2】：

您可以将 addNewRow 实现为 AJAX 操作方法。在方法中添加一个新实例化的 Product 对象并返回页面。您的迭代将处理相关输入字段的显示。

【讨论】：

【解决方案3】：

当您调用 onclick 时，您将转到一个 js 方法，这意味着一个按钮被按下。在这种情况下，使用 js 创建一行并显示一个显示“保存值”的按钮，然后当控件转移回该按钮，当控件返回到按钮时，检查该保存值按钮的值，如果按下它，请使用 document.forms['id']...

【讨论】：