Renaming a name attribute to <input> in different tables

Question

JSFiddle here: http://jsfiddle.net/pceh73g8/

In my script, I am going to load tables that will be the same. following is my example:

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

I want to write a script to rename names by index. In the end, the output should be as follows:

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

I tried to use .each () to traverse each table and get the index number of each table (to attach to the back of the input names).

I am not sure how to select inside each of the tables. I seem to have chosen everything: inputs. How to select the "Children" of each table, which are fields, and rename them according to the index?

  $(".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

This is because the non-contextual selector $(':input') used for each iteration, so all input elements will simply get the index of the last <table> element. Use the $(this) and DOM transversal methods instead.

In addition, .each() comes with an index with a zero value of i , so you really do not need to re-add the function :), however, note that since it is zero (i.e. starts from zero, not one), you will need to add 1 to it (so you will have firstname1 instead of firstname0 for the first occurrence of the input element, for example).

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

See a fixed fiddle here: http://jsfiddle.net/teddyrised/pceh73g8/4/

---

According to @dsfq's answer , you can also use the .attr() method, which takes functions. I still learn something new every day here;)

Answer 2

Find input elements in each table using the find method:

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

You can also use attr as a setter instead of each loop.

Also $(this).find(":input") equivalent to $(":input", this) if you prefer.

Answer 3

One solution is to add this for the second (the second parameter provides a context for finding the element matching the first selector):

 $(".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); }); }); }); 

violin

Answer 4

Just maintain a counter variable and increment it

 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; }); });