Adding a row to a table dynamically inside another table

Adding a row to a table dynamically inside another table

Hi pals,

I am new to jquery, especially this kind work.. Please help in my work.

I need to insert a row onclick a button, 'add'.

Inside that table I am having another table, which has options(three column) of the parent table. 

And I am having another button called 'add options' which onclick I need to add a new row to the options table appropriate to that parent row.

This is the screeshot of the actual.




This is my HTML

<STARTS HERE>

<div id="fourthDynField" class="fieldType" style="font-family: arial; cursor: pointer; background-color: gainsboro; height: 10px; padding: 10px; font-size: 12px;">Field type : Radio button 
 <img style="float: right; padding-right:10px; cursor: pointer;" src="../img/expand.png" alt="" />
 <input type="button" value="Add" name="addCheckBox" id="addCheckBox" onclick="javascript:addNewCheckBox()">
 </div>
 <div id="table">
 <div id="tableDyn4">
 
 <table id="NewCheckBox" border='1'>
  <tr align="center" style="background: #f2f2f2;">
  <th rowspan="2">Label</th>
<th rowspan="2">Order</th>
 <th rowspan="2">Name</th>
<th colspan="4">Options</th> 
<td rowspan="2"><input type="button" value="add option" onclick="addNewOption()"></td>
    </tr>
    <tr align="center">
   <td>
     <table id="testingTable1" border="1">
       <tr align="center" style="background: #f2f2f2;">
        <td>ID</td>
        <td>Value</td>
<td>Text</td>
<td></td>
 
       </tr>
     </table>
   </td>
    </tr>
<<THE TEXT BOX DETAILS COMING FROM JAVA LAYER, I NEED EMPTY TEXT BOXES IN NEW ROWS>>
  
</table>

 
 </div>
 </div>

<ENDS HERE>

I am confused how to start itself.

Please help me in this issue.

Thanks in advance

Surendar