How To Add/Remove Multi Rows In jQuery And Wordpress

Answer 1

I'm not sure if this is what you wanted, but 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);
  })
 }

})