2

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

我不能让它从索引 1 开始，
在添加第二行后它开始按顺序添加，
虽然按顺序删除它是可以的，但是当我们从中间删除它不会改变数字顺序。

我正在使用此代码来增加 

var i=1;

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

您可以在此处查看现场示例，这将更具解释性
jsfiddle.net

它应该从索引 1 自动开始

谢谢

4

1 回答 1

2

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

通过命名 td 和输入.form_id，您将遍历所有这些。

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

使您的选择器更具体

根据您的评论，我会将您的“排序”函数分离为它自己明确定义的函数，而不是使该行为成为两个异常函数的一部分。您没有很好地遵循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(); 
}
于 2013-07-16T23:17:36.833 回答