Question

我有一个html表，用户可以动态添加行。
我试图用jquery实现自动行增量。

我无法从索引1开始，
添加第2行后，它开始按顺序添加，
按顺序删除它是正常的，但是当我们从中间删除时它不会改变数字顺序。

我使用此代码增加

var i=1;

$('.form_id').each(function(){
    $(this).text(i);
    i++;
});

你可以在这里看到实例，它会更具说明性 jsfiddle.net

它应该从索引1

自动启动

由于

Answer 1

你的问题是你的班级命名。看到这个工作小提琴http://jsfiddle.net/ZFWU7/5/

通过命名td和输入.form_id来迭代所有这些。

 $('td.form_id').each(function(i){
        $(this).text(i+1);
    });

使您的选择器更具体

根据你的评论，我会将你的“排序”函数分成它自己明确定义的函数，而不是将这种行为作为两个anonomys函数的一部分。您没有很好地遵循DRY规则。我已经在下面（从小提琴）以更清洁，更易于维护的方式重写了您的代码。这只是稍好一点。在全局命名空间中声明函数不是一个很好的做法。将命令组命名为“控制器”会更好。 http://addyosmani.com/blog/essential-js-namespacing/

$(document).ready(function() {
    $("#add-line").click(addRow);
});

function updateRowOrder(){
 $('td.form_id').each(function(i){
        $(this).text(i+1);
            });
}

function addRow(){
    var template = $('#template'),
    id = 0;

    if(!template.is(':visible'))
    {
        template.show();
        return;
    }
    var row = template.clone();
    template.find("input:text").val("");
    row.attr('id', 'row_' + (++id));
    template.before(row);
    var i=1;
    updateRowOrder(); 
    $('.form-fields').on('click', '.remove', removeRow);

}

function removeRow(){
    var row = $(this).closest('tr');
    if(row.attr('id') == 'template')
    {
        row.hide();
    }
    else
    {
        row.remove();
    }
    updateRowOrder(); 
}

Jquery动态添加行号

1 个答案: