How To Add/Remove Multi Rows In jQuery And Wordpress

Question

I'm making a wordpress theme options page, and one of the options I want to make is how to add/removes dynamic rows by that the user can make it when he want to add a block. something like 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>

Beside I want to make it saved to wordpress when updating are saved .

R.Karar, while this is a very old question, you're still active. So I wanted to inform you that as @manetsus realized (in a suggested edit), your imageshack link is broken. If possible, you might consider restoring the image in a sustainable way (i.e. through SO's imgur account) in order to preserve your post for eternity;) — Andras Deak -- Слава Україні
– Andras Deak -- Слава Україні, Commented Oct 12, 2015 at 18:16

Mottie · Accepted Answer · 2010-04-04 16:26:02Z

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

})

Collectives™ on Stack Overflow

How To Add/Remove Multi Rows In jQuery And Wordpress

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related