Question

我正在尝试在wordpress主题选项页面中使用jQuery添加动态行。

我在主题选项页面上的HTML

<a href="#" title="" class="add-author">Add Author</a>

<table class="authors-list" id="tablebody" border="1" bordercolor="#ddd" 
style="background-color:#F5F5F5" width="100%" cellpadding="3" cellspacing="3">
    <tr><td>Designation</td><td>StartDate</td><td>EndDate</td></tr>
    <tr>
        <td><input style="width:200px" type="text" name="designation"/></td>
        <td><input style="width:200px" type="text" id="start_date" name="start_date"/></td>
        <td><input style="width:200px" type="text" id="end_date" name="end_date"/></td>
    </tr>
</table>

我的jQuery CODE用于添加行

var counter = 1;
jQuery('a.add-author').click(function(event){
alert("asdas");
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input style="width:200px" type="text" name="designation' +
counter + '"/></td><td><input style="width:200px" type="text" id="start_date'+ counter +'" name="start_date' +
        counter + '"/></td><td><input style="width:200px" id="end_date'+ counter +'" type="text" name="end_date' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);
    jQuery("#start_date"+ counter).datepicker();
    jQuery("#end_date"+ counter).datepicker();

});

Working DEMO of addition of rows

如何保存wordpress数据库中没有行的计数器......我怎样才能检索添加的行的数量..Plz帮助我卡住...我没有在wordpress数据库中创建任何新表。我想通过update_option或add_option将其保存在主题选项数据库中，所以我也尝试使用ajax request，但不知道如何在这些页面上使用update_option。非常感谢

Answer 1

我真的不喜欢使用计数器，即使它可能是最轻的方式，我相信jquery中最安全的方法就是在你添加行之后做一个ajax请求（紧接着你追加）：

    //The first table row is the header so you remove this row from the count
    rowNumber = ($('#myTable tr').length - 1);

然后，您只需使用数据库中的ajax保存此数字：

   jQuery.ajax({
     type: 'post',
     url: 'save.php' //In this file, you'll do a php/mysql request that will do this SQL request *** UPDATE your_table SET your_table_column_where_you_want_to_set_it = $_POST['rownumber'] WHERE current_user_id = unique_user_id *** Of course, you might also save the date in this row but I let you take care of the request update now that you understand the basics
     , 
     data: {
        rownumber: rowNomber // This will be the $_POST['rownumber'] on the save.php file
      }, 
     success: function() {
        // Action if it works (popup saying new field saved ? or something like this)
     },
     error: function() {
        //If it doesn't work, do an action
     }
   });

如何使用jquery php保存动态添加的行？

1 个答案: