Fatal编程技术网
  • javascript/
  • Javascript 为动态字段指定增量值

Javascript 为动态字段指定增量值

javascript jquery

Javascript 为动态字段指定增量值,javascript,jquery,Javascript,Jquery,我有从jquery函数生成的动态输入字段。可以通过单击这些输入字段来添加或删除按钮。这些字段由mysql表中的数据填充。每个填充的输入都有一个从数据库获取的唯一ID。添加新字段时，我从ajax请求中获得下一个自动增量。然后我可以增加+1，但对于所有字段。我只想对新字段执行此操作。如果由于某种原因，插入查询事务是从另一个应用程序生成的，它将更新从字段开始增量，然后用正确的值更新其余的字段（检查以了解我的意思是jsFiddle（） 问题在于如何将所有内容组合在一起。我只希望能够添加一个新字段，并为其

我有从jquery函数生成的动态输入字段。可以通过单击这些输入字段来添加或删除按钮。这些字段由mysql表中的数据填充。每个填充的输入都有一个从数据库获取的唯一ID。添加新字段时，我从ajax请求中获得下一个
自动增量。然后我可以增加+1，但对于所有字段。我只想对新字段执行此操作。如果由于某种原因，插入查询事务是从另一个应用程序生成的，它将更新
从
字段开始增量，然后用正确的值更新其余的字段（检查以了解我的意思是jsFiddle（）

问题在于如何将所有内容组合在一起。我只希望能够添加一个新字段，并为其分配适当的下一个
个人id
，以便插入db



$（文档）.ready（函数（）{
变量$increment_num=$（'increment_num'）；
变量间隔=100；//3000=3秒
函数doAjax（）{
$.ajax({
键入：“POST”，
url:'personAutoIncrement.php'，
数据：$（this）.serialize（），
数据类型：“json”，
成功：功能（数据）{
var$cloned=$（“#输入_表tr”）；
var num=parseInt（数据）；
$increment_num.val（num）；
$cloned.每个（功能（i）{
$（this.find（'[name^=“increment_id”]'）.first（）.val（num+i）；
})
},
完成：功能（数据）{
//安排下一个
setTimeout（doAjax，interval）；
}
});
}
setTimeout（doAjax，interval）；
变量单击计数=0；
$（'#btnAdd'）。单击（函数（）{
单击_count++；
var$clones=$（“#输入_表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\u entry\uu'+num），
ident='increment_id'+num；
person\u id='person\u id\u'+num；
person\u fname='person\u fname\uu'+num；
person_lname='person_lname_'+num；
//清除新输入的所有部分
newSection.find（'input'）.not（'[name^=“increment_id”]'）.val（''）；
newSection.find（'input[name^=“increment_id”]'）.attr({
“id”：标识，
“名称”：标识
}).val（/*next_num*/）；
newSection.find（'input[name^=“person_id”]”）.attr({
“id”：个人id，
“名称”：人员id
}).val（/*next_num*/）；
newSection.find（'input[name^=“person\u fname”]'）.attr({
“id”：人员名称，
“名称”：人员名称
}).val（/*next_num*/）；
$（“#输入_表”）.append（newSection）；
$（'btnDel'）.prop（'disabled'，''）；
如果（num==100）$（'#btnAdd'）.prop（'disabled'，'disabled'）；
});
$（'#btnDel'）。单击（函数（）{
var num=$（'.clonedSection'）.length；//当前有多少重复的输入字段
$（'#pq_entry.'+num）.remove（）；//删除最后一个元素
//启用“添加”按钮
$（'btnAdd'）.prop（'disabled'，''）；
//如果只剩下一个元素，请禁用“删除”按钮
如果（num-1==1）$（'btnDel'）.prop（'disabled'，'disabled'）；
});
$（'btnDel'）.prop（'disabled'，'disabled'）；
});


html



来自数据库的ID
名字





如果我没有弄错的话，您想知道如何增加某些行，但允许其他行被“冻结”（因为它们被保存到数据库中）。我对您的代码做了更多更改，以下是重要的注意事项：


  • 我删除了动态名称属性。您不需要动态生成字段名，您只需分配数据-*属性来保存id或参考
    tr.find（'input[name=“person_id”]”）
    • 

  • 在
    tr
    中添加了
    data saved
    属性，以了解是否应将其包括在更新的
    自动增量id中，或者是否应保持原样
    • 

  • 在每一行旁边添加了一个save按钮，因为它只是设置了该行的
    data saved
    属性，如果需要，您可以添加一个AJAX调用来保存记录
    • 

    
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>

    

    
从要插入数据库的下一个ID开始递增：
    
来自数据库的ID
名字

    

    
话虽如此，我可能会通过一个隐藏的元素以不同的方式处理这个问题：
    

    
当生成新行时，将为空：
    

    
然后在我的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']);
       );
    }

?>

    

    为什么不能将AUTO_INCREMENT字段委托给您的db层？您不应该在客户机上搞砸它：即使显示ID字段通常也是个坏主意。我更喜欢在最终提交后直接从服务器（即db服务器）检索新ID你使用MySQL还是类似的RDBMS？@ RoMm。我使用MySQL。你想让我粘贴MySQL／PHP代码吗？@ RoMm。有什么想法能完成这项工作吗？这很好！谢谢。一个小小的咨询：因为我每3秒做一次Ajax调用，我应该考虑做吗？？很高兴我能提供帮助。关于SSE，我个人会选择WebSocket，但如果您有SSE的经验并且它适合您的用例，那么当然：）谢谢。我会多读一些。Rob单击
    delete
    按钮时，从数据库中删除用户有什么建议？我会将delete按钮移动到每个数据库中

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

    

    <?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']);
       );
    }

?>