javascript - 自动递增输入值

Question

我有一个像这样的 html 结构:

<table id="options-table">                  
            <tr>
                <td width="10">No.</td>
                <td>Field 1</td>
                <td>Field 2</td>
                <td></td>
            </tr>
            <tr>
                <td><input type="text" value="1" /></td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>                        
                <td><input type="button" class='del' value='Delete' /></td>
            </tr>                  
            <tr>
                <td><input type="text" value="2"  /></td>
                <td><input type="text"  /></td>
                <td><input type="text"  /></td>
                <td><input type="button" class="add" value="Add More" /></td>
            </tr>
        </table>

和这样的 jQuery 代码

$('table').on('click','.del', function(){
                    $(this).parent().parent().remove();
                });

                $('table').on('click', '.add', function(){
                    $(this).val('Delete');
                    $(this).attr('class','del');
                    var appendTxt = "<tr><td><input type='text'/></td> <td><input type='text' /></td> <td><input type='text' /></td> <td><input type='button' class='add' value='Add More' /></td></tr>";
                    $("tr:last").after(appendTxt);          
                });        

如何在“编号”列中添加自动递增数字，以便每次添加新行时，该字段值都会填充自动递增数字，并且每次删除行时，都会重新计算其下面的数字.

这是jsfiddle link谢谢

Answer 1

将名称添加到您的输入中(或者它可以是类属性)，如下所示: <input name="number" type="text" value="1"/> ，然后在每次更改表时更新输入值。

$("input[name='number']").each(function(ind) {
   $(this).val(ind + 1);
});

参见Fiddle