Question

在我的脚本中，我将要加载相同的表格。该以下是我的例子：

<table class="table">
<tr><td>First Name</td><td><input name="firstname" type="text"></td></tr>
<tr><td>Last Name</td><td><input name="lastname" type="text"></td></tr>
</table>

 <table class="table">
 <tr><td>First Name</td><td><input name="firstname" type="text"></td></tr>
 <tr><td>Last Name</td><td><input name="lastname" type="text"></td></tr>    
</table>

我希望编写一个脚本来按名称重命名名称。最终，输出应该如下：

 <table class="table">
<tr><td>First Name</td><td><input name="firstname1" type="text"></td></tr>
<tr><td>Last Name</td><td><input name="lastname1" type="text"></td></tr>
</table>


 <table class="table">
 <tr><td>First Name</td><td><input name="firstname2" type="text"></td></tr>
 <tr><td>Last Name</td><td><input name="lastname2" type="text"></td></tr>    
</table>

我试图使用.each（）遍历每个表，并获取每个表的索引号（附加到输入名称的后面）。

我不确定如何在每个表中选择。我似乎正在选择所有：输入。我们如何选择＆＃34;儿童＆＃34;每个表是字段并根据索引重命名？

 $(".table").each(function(){ 
   //Get current index of the table 
   var i = $(this).index();

    $(":input").each(function(){ 
       var oldname = $(this).attr('name'); 
       $(this).attr('name',oldname+i);
    });

});

Answer 1

这是因为您为每次迭代使用了非上下文特定的$(':input')选择器，因此所有输入元素将只接收最终<table>元素的索引。请改用$(this)和DOM横向方法。

此外，.each()附带一个从零开始的索引i，因此您实际上不必在函数内重新声明它:)但请注意，因为它是基于零（即从零开始，而不是从零开始），您必须向其添加1（因此，对于第一次输入，您将有firstname1而不是firstname0例如，元素。

$(".table").each(function(i){ 
    $(this).find(":input").each(function(){ 
        var oldname = $(this).attr('name'); 
        $(this).attr('name',oldname+(i+1));
    });    
});

请参阅此处的固定小提琴：http://jsfiddle.net/teddyrised/pceh73g8/4/

根据@dsfq's answer，您还可以使用接受函数的.attr()方法。我仍然每天都在学习新的东西;）

Answer 2

使用find方法查找每个表格中的输入元素：

$(".table").each(function () {
    var i = $(this).index();
    $(this).find(":input").attr('name', function (ind, oldname) {
        return oldname + i;
    });
});

此外，您可以使用attr方法作为setter而不是each循环。

如果你更喜欢，$(this).find(":input")等同于$(":input", this)。

Answer 3

一种解决方案是将this添加到第二个（第二个参数提供搜索第一个选择器匹配的元素的上下文）：

$(".rename").click(function () {
    $(".table").each(function () {
        var i = $(this).index();
        $(":input", this).each(function () { //add this
            var oldname = $(this).attr('name');
            $(this).attr('name', oldname + i);
        });
    });
});

fiddle

Answer 4

只需维护一个计数器变量并将其递增

var i = 0;
$('.table').each(function(){
   i++; // increment
   $(this).find('[name=firstname]').attr("name", function(_, n){ return n + i; });
   $(this).find('[name=lastname]').attr("name", function(_, n){ return n + i; });
});

在不同的表中的<input />中重命名name属性

4 个答案: