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

我不确定这是否是您想要的，但我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>

脚本

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

})

如何在jQuery和Wordpress中添加/删除多行

1 个答案: