javascript - 为动态字段分配增量值

Question

我有从 jquery 函数生成的动态输入字段。可以通过单击这些输入字段的按钮来添加或删除。这些字段由 mysql 表中的数据填充。每个填充的输入都有一个从数据库中获取的唯一 ID。添加新字段时，我从 ajax 请求中获取下一个 AUTO_INCREMENT。然后我可以增加 +1 但对于所有字段。我只想为新领域做这个。如果由于某种原因插入查询事务是从另一个应用程序进行的，它将更新 start increment from 字段，然后用正确的值更新其余部分(检查我的意思 jsFiddle( http://jsfiddle.net/f9XP8/2/ )。

问题是如何把它们放在一起。我只想按照能够添加一个新字段并为数据库插入分配适当的下一个 person_id 。 LIVE EXAMPLE

<script>
$(document).ready(function () {
    var $increment_num = $('#increment_num');
    var interval = 100;  //3000 = 3 seconds
    function doAjax() {
        $.ajax({
            type: 'POST',
            url: 'personAutoIncrement.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function (data) {
                    var $cloned = $('#input_table tr');
                    var num = parseInt(data);
                    $increment_num.val(num);
                    $cloned.each(function(i){
                        $(this).find('[name^="increment_id"]').first().val(num+i);
                    })
            },
            complete: function (data) {
                // Schedule the next
                setTimeout(doAjax, interval);

        }
    });
    }
    setTimeout(doAjax, interval);
    var click_count = 0;
    $('#btnAdd').click(function () {
    click_count++;
        var $clones     = $('#input_table tr'),
            num         = $clones.size() + 1,
            next_num    = parseInt($clones.last().find('input[name^="increment_id"]').val()) + 1,
            $template   = $clones.first(),
            newSection  = $template.clone().attr('id', 'pq_entry_'+num),
            ident       = 'increment_id_'+num;
            person_id = 'person_id_'+num;
            person_fname = 'person_fname_'+num;
            person_lname = 'person_lname_'+num;

        // clear out all sections of new input
        newSection.find('input').not('[name^="increment_id"]').val('');

        newSection.find('input[name^="increment_id"]').attr({
            'id': ident,
            'name': ident
        }).val(/*next_num*/);
        newSection.find('input[name^="person_id"]').attr({
            'id': person_id,
            'name': person_id
        }).val(/*next_num*/);
        newSection.find('input[name^="person_fname"]').attr({
            'id': person_fname,
            'name': person_fname
        }).val(/*next_num*/);


        $('#input_table').append(newSection);
        $('#btnDel').prop('disabled', '');
        if (num == 100) $('#btnAdd').prop('disabled', 'disabled');
    });

    $('#btnDel').click(function () {
        var num = $('.clonedSection').length; // how many duplicate input fields we currently have
        $('#pq_entry_' + num).remove(); // remove the last element

        // enable the "add" button
        $('#btnAdd').prop('disabled', '');

        // if only one element remains, disable the "remove" button
        if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
    });

    $('#btnDel').prop('disabled', 'disabled');
});
</script>

html

<table>
    <thead>
        <tr>
            <th>ID from DB</th>
            <th>First Name</th>
        </tr>
    </thead>
    <tbody id="input_table">
        <tr id="pq_entry_1">
            <td><input type="text" id="increment_id_1" name="increment_id_1" readonly value="5" /></td>
            <td><input type="text" name="first_name" placeholder="First Name" /></td>
        </tr>
    </tbody>
</table>
<input type='button' id='btnAdd' value='add text box' />
<input type='button' id='btnDel' value='Delete' /></br>
</table>

Answer 1

如果我没记错的话，你想知道如何增加某些行，但允许其他行被“卡住”(因为它们被保存到数据库中)。我对您的代码做了更多更改，以下是重要说明:

1. 我删除了动态名称属性。不需要动态生成字段名，直接赋data-*属性保存id或者引用tr.find('input[name="person_id"]')即可
2. 添加了 data-saved属性为 tr知道它是否应该包含在更新的 auto increment id 中或者它是否应该保持原样
3. 在每一行旁边添加了一个保存按钮，它只是设置了 data-saved行上的属性，如果需要，您可以添加 AJAX 调用来保存记录

Updated Fiddle

Javascript:

$(document).ready(function () {
    var $increment_num = $('#increment_num');
    var interval = 5000;  //3000 = 3 seconds
    function doAjax() {
        $.ajax({
            type: 'POST',
            url: 'personAutoIncrement.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function (data) {
                var $cloned = $('#input_table tr').not('[data-saved]');
                var num = parseInt(data);
                $increment_num.val(num);
                $cloned.each(function(i){
                    var $this = $(this);
                    $this.find('[name^="person_id"]').first().val(num+i);
                })
            },
            complete: function (data) {
                // Schedule the next
                setTimeout(doAjax, interval);
            }
        });
    }
    setTimeout(doAjax, interval);
    var click_count = 0;

    $('#btnAdd').click(function () {
        click_count++;
        var $clones     = $('#input_table tr'),
            num         = $clones.size() + 1,
            next_num    = parseInt($clones.last().find('input[name^="person_id"]').val()) + 1,
            $template   = $clones.first(),
            newSection  = $template.clone().attr('id', 'pq_entry_'+num),
            person_id   = 'person_id_'+num;
            person_fname = 'person_fname_'+num;
            person_lname = 'person_lname_'+num;

        newSection.removeAttr('data-saved');

        // clear out all sections of new input
        newSection.find('input[type="text"]').val('');

        newSection.find('input[name^="person_id"]').attr({
            'id': person_id
        }).val(next_num);

        newSection.find('input[name^="person_fname"]').attr({
            'id': person_fname
        });

        newSection.find('input[type="button"]').attr('data-ident', next_num);


        $('#input_table').append(newSection);
        $('#btnDel').prop('disabled', '');
        if (num == 100) $('#btnAdd').prop('disabled', 'disabled');
    });

    $('.save-button').click(function(){
        var $parent = $(this).parents('.clonedSection')
        var id = $parent.find('input[name="person_id"]').val();
        // do whatever else here, save to db
        $parent.attr('data-saved', '1');
    })

    $('#btnDel').click(function () {
        var num = $('.clonedSection').length; // how many duplicate input fields we currently have
        $('#pq_entry_' + num).remove(); // remove the last element

        // enable the "add" button
        $('#btnAdd').prop('disabled', '');

        // if only one element remains, disable the "remove" button
        if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
    });

    $('#btnDel').prop('disabled', 'disabled');
});

HTML:

<form>
<strong>Start Increment from Next ID to be inserted in the DB:</strong><input id="increment_num" name="increment_num"  type="text" /></br>
<table>
    <thead>
        <tr><th>ID from DB</th><th></th>
        <th>First Name</th></tr>
    </thead>
    <tbody id="input_table" >
        <tr id="pq_entry_1" class="clonedSection" data-saved="1">
            <td><input type="text" name="person_id" value='1' readonly /></td>
            <td><input id="person_fname_1" name="person_fname" placeholder=" First Name" type="text" value='James'/></td>
            <td><input type="button" class="save-button" value="Save" />
        </tr>
        <tr id="pq_entry_2" class="clonedSection" >
            <td><input type="text" name="person_id" value='2' readonly /></td>
            <td><input id="person_fname_2" name="person_fname" placeholder=" First Name" type="text" value='Cynthia'/></td>
            <td><input type="button" class="save-button" value="Save" />
        </tr>
    </tbody>
</table>
<input type='button' id='btnAdd' value='add another Person' />
<input type='button' id='btnDel' value='Delete' /></br>
</form>

说了这么多，我可能会通过隐藏元素来以不同的方式处理这个问题:

<input type="hidden" name="person_id" value="1" />

当生成新行时被取消:

<input type="hidden" name="person_id" value="" />

然后在我的 PHP 中，我将允许 MySQL 以如下方式处理自动递增 id:

<?php
    $params = $_POST;
    if(is_numeric($params['person_id'])){
       $sql = sprintf('UPDATE person SET fname = "%s", lname = "%s" WHERE person_id = %u LIMIT 1', 
          mysql_real_escape_string($params['fname']), 
          mysql_real_escape_string($params['lname']), 
          intval($params['person_id'])
       );
    } else {
       // the NULL tells MySQL to select the correct next increment id automatically
       $sql = sprintf('INSERT INTO person (id, fname, lname) VALUES (NULL, "%s", "%s")',
         mysql_real_escape_string($params['fname']),
         mysql_real_escape_string($params['lname']);
       );
    }

?>