0

使用 Javascript 将单元格动态添加到 JSP 页面。需要从单元中收集数据并将数据发送到数据库。使用 Spring MVC、hibernate、spring form 标签

任何解释这一点的文章都非常感谢！

任何建议都会有所帮助！

javascript:

var i=0;
function addRow()
{
i++;
var tbl = document.getElementById('div1');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);

var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'hostName' + i;
el.id = 'hostName' + i;
el.size = 30;
el.maxlength = 200;
firstCell.appendChild(el);

var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'directory' + i;
el2.id = 'directory' + i;
el2.size = 30;
el2.maxlength = 200;
secondCell.appendChild(el2);

var thirdCell = row.insertCell(2);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'userName' + i;
el3.id = 'userName' + i;
el3.size = 20;
el3.maxlength = 20;
thirdCell.appendChild(el3);

var fourthCell = row.insertCell(3);
var el4 = document.createElement('input');
el4.type = 'text';
el4.name = 'password' + i;
el4.id = 'password' + i;
el4.size = 20;
el4.maxlength = 20;
fourthCell.appendChild(el4);
}


 function removeRowFromTable()
 {
 var tbl = document.getElementById('div1');
 var lastRow = tbl.rows.length;
 if (lastRow > 2) tbl.deleteRow(lastRow - 1);
 }
</script>`

动态创建的单元格：

<tr><td colspan="4">
        <table id="div1" style="display:none">
            <tr><td>Host Name</td><td>Directory</td><td>User Name</td><td>Password</td></tr>
            <tr><td><input type="text" value="${events.hostName}" size="30" maxlength="200"/></td>
            <td><input type="text" value="${events.directory}" size="30" maxlength="200"/></td>
            <td><input type="text" value="${events.userName}" size="20" maxlength="20"/></td>
            <td><input type="text" value="${events.password}" size="20" maxlength="20"/></td></tr>
        </table>
            </td></tr>
            <tr id="i1" style="display:none"><td><input type="button" onclick="addRow()" value="+"/>
            <input type="button" onclick="removeRowFromTable();" value="-" />
            </td></tr>
4

1 回答 1

1

由于您没有使用 javascript 向服务器发出 ajax 请求，而仅生成 html 内容，因此从服务器端的角度来看，它与您通常使用 Spring MVC 或 Spring 表单没有什么不同。

你可以把程序流程想象成：当一个请求被发送到服务器时，服务器可以请求资源作为响应。在您的情况下，它是带有 javascript 代码的 html 页面。javascript代码在客户端执行。它修改html标签。对于您的情况，您只需要确保生成的 html 表单将以 Spring Controller 处理它的任何方式创建对您的服务器的有效请求。换句话说，您可以先尝试在没有 javascript 的情况下制定可行的解决方案。然后用javascript替换静态组件。

如果你不熟悉 Spring MVC 或 Hibernate，网上有很多教程：

http://www.mkyong.com/tutorials/spring-mvc-tutorials/

http://static.springsource.org/docs/Spring-MVC-step-by-step/

http://www.mkyong.com/tutorials/hibernate-tutorials/

希望能帮助到你

于 2012-09-18T03:19:59.357 回答