Home/ Questions/Q 8543421
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T12:17:51+00:00

Using Javascript to add cells dynamically to a JSP page. Need to collect data

  • 0

Using Javascript to add cells dynamically to a JSP page. Need to collect data from the cells and send the data to Database. Using Spring MVC, hibernate, spring form tags

Any articles explaining this is greatly appreciated!

Any suggestions will be helpful!

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>`

cells dynamically created:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As you are not using javascript to make ajax request to server but only generate html content, it is not different from your usual usage of Spring MVC or Spring form at the server side point of view.

    You can think of the program flow as:
    When a request is sent to server, server can requested resource in response. In your case, it is html page with javascript code. The javascript code is executed at the client side. It modifies html tag. For your case, you only need to make sure that the generated html form will create a valid request to your server in whatever way your Spring Controller going to handle it. In other words, you can try to make a workable solution without javascript first. Then replace the static component by javascript.

    If you are not familiar with Spring MVC or Hibernate, there are plenty of tutorials online:

    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/

    Hope it helps

    • 0