Как добавить / удалить несколько строк в jQuery и Wordpress

Question

Я создаю страницу параметров темы WordPress, и один из вариантов, который я хочу сделать, - это как добавить / удалить динамические строки, с помощью которых пользователь может сделать это, когда он хочет добавить блок. как то так

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

Кроме того, я хочу сохранить его в WordPress при сохранении обновления.

Answer 1

Я не уверен, что это то, что вы хотели, но я разместил здесь демо .

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);
  })
 }

})