0

Javascriptを使用してセルをJSPページに動的に追加します。セルからデータを収集し、データベースに送信する必要があります。Spring MVC、休止状態、Springフォームタグの使用

これを説明する記事は大歓迎です！

どんな提案も役に立ちます！

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コンテンツのみを生成するため、サーバー側の観点から見ると、SpringMVCまたは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 に答える