I am creating a wordpress theme options page, and among the options I wish to make is how you can add/removes dynamic rows with that the consumer makes it as he wish to give a block. something similar to this

<table id="block" width="350px" border="0">
    <tr>        
        <td> 1 </td><!--Nomber of the row-->
        <td><input type="text" /><br /><label>Title</label></td><!--Title of the row-->

        <td><input type="text" /><br /><label>IMG Link</label></td><!--Image of the row-->

        <td><textarea  type="textarea" cols="40" rows="2"></textarea><br /><label>Description</label></td>
    </tr>
</table>


and also the result is going to be something similar to this :

Please Click Here To See The Image


Beside I wish to allow it to be saved to wordpress when upgrading are saved .

Thanks.
Karar

I am unsure if this sounds like that which you wanted, however i posted a demo here.

HTML/CSS

<input id="addRow" type="button" value="Add Row">
<table id="block" width="350px" border="0">
 <tr>
  <td> 1 </td><!--Nomber of the row-->
  <td><input type="text" /><br /><label>Title</label></td><!--Title of the row-->
  <td><input type="text" /><br /><label>IMG Link</label></td><!--Image of the row-->
  <td><textarea  type="textarea" cols="40" rows="2"></textarea><br /><label>Description</label></td>
 </tr>
</table>

<style type="text/css"> 
#block { width: 50%; padding: 5px; }
#block td { vertical-align: top; }
</style>

Script

$(document).ready(function(){
 var newRow = '\
  <tr>\
   <td>\
    <span class="index"></span> \
    <input id="removeRow" type="button" value="X" title="remove this row">\
   </td>\
   <td><input type="text" /><br /><label>Title</label></td><!--Title of the row-->\
   <td><input type="text" /><br /><label>IMG Link</label></td><!--Image of the row-->\
   <td><textarea  type="textarea" cols="40" rows="2"></textarea><br /><label>Description</label></td>\
  </tr>';

 $('#addRow').click(function(){
  $('#block').append(newRow);
  reIndex();
 })

 $('#removeRow').live('click', function(){
  $(this).closest('tr').remove();
  reIndex();
 })

 function reIndex(){
  $('#block').find('.index').each(function(i){
   $(this).html(i+2);
  })
 }

})