Question

我能够在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实现这一点。但我失败了。任何人都可以有任何建议如何做到这一点。

Answer 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

Answer 2

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

Answer 3

当你打电话点击时，你会转到一个js方法，这意味着一个按钮被预设..在这种情况下，使用js创建一行并显示一个显示“保存值”的按钮，然后当控件转回该按钮以及当控件转回按钮时检查该保存值按钮的值，如果按下该按钮，则使用document.forms ['id'] ...

提交它

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

3 个答案: