Question

使用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>

Answer 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/

希望有所帮助

需要将动态数据从JSP发送到sql server

1 个答案: