How to add row of text box and combox dynamically using struts......!!!!!!!

Question

Hi All,
In my JSP I have something like a row of TextBox-----Combox-----TextBox Button--Add
When user clicks on "Add" I need to add exactly the same row as above.
I am using struts and have following code
My jsp
<html:text property="paramName" size="20" maxlength="50"/>  
<html:select property="paramTypeId">
   <html:options collection="queryReturnType" property="value" labelProperty="label" />
</html:select>   
<html:text property="paramDefault" size="20" maxlength="50"/>  
<html:button property="buttonAdd" style="cursor:pointer" onclick="addRow()"> <bean:message key='button.add'/>  /html:button>  
My actionForm
     private String[] paramName;
     private int[] paramTypeId;
     private String[] paramDefault;
//having getter and setter method also for these three attibutesPlease help....it would be of great help if some one can give me a java script of code for adding a row like I mentioned above....!!!
Thanks

Answer 1

Hi inryji.
Thanks for your reply..!!!
I have written the below method to add a row and its adding also.
But when I submit the form....value for combox is not going to the newly addedd row.
here is my jsp code...
<table border="0" width="75%" cellspacing="1" id="myTable">
<tbody>
<tr>
     <td width="80%" class="evencellleft">
          <html:text property="paramName" size="20" maxlength="50"/>  
          <html:select property="paramTypeId">
               <html:options collection="queryReturnType" property="value" labelProperty="label" />
          </html:select>   
          <html:text property="paramDefault" size="20" maxlength="50"/>  
          <html:button property="buttonAdd" style="cursor:pointer" onclick="addRow()"> <bean:message key='button.add'/>  </html:button>  
          <html:button property="buttonDelete" style="cursor:pointer" onclick="removeRow()"><bean:message key='button.delete'/>  </html:button>
     </td>
</tr>
</tbody>
</table>
here is my java script code...
function addRow() {
     var tbody = document.getElementById('myTable').getElementsByTagName("TBODY")[0];
     var row = document.createElement("<tr>");
     var td1 = document.createElement("<td width='80%' class='evencellleft'>");
     td1.innerHTML+="   ";
     var myElement1 = document.getElementById('paramName');
     var el1 = myElement1.cloneNode(true);
     el1.id = "";
     td1.appendChild(el1);
     td1.innerHTML+="   ";
     var myElement2 = document.getElementById('queryReturnTypeId');
     var el2 = myElement2.cloneNode(true);
     el2.id = "";
     td1.appendChild(el2);
     td1.innerHTML+="    ";
     var myElement3 = document.getElementById('paramDefault');
     var el3 = myElement3.cloneNode(true);
     el3.id = "";
     td1.appendChild(el3);
     row.appendChild(td1);
     tbody.appendChild(row);
}Please help...!!!