jQuery - Nested Loop Problem

Question

I have a table of input fields where I want to 1)change the first column from an input field to a normal td field (which works) and 2) change the name attribute of the other td fields within the row. (this is related to a previous posting Retrieve an Input fields' name, and then change it but is a different problem).
I want this:

<tr id="row_0" class="dataRow">  
    <td><input type="text" class="tabcell" name="_0-2" value="AFB" /><td>
    <td><input type="text" class="tabcell" name="_0-3" value=7.0 /><td>
    <td><input type="text" class="tabcell" name="_0-7" value=7.6 /></td>  
    ....  
<tr id="row_1" class="dataRow">  
    <td><input type="text" class="tabcell" name="_1-2" value="TANKERS" /><td>

replaced with this:

<tr id="row_0" class="dataRow">
    <td name="resource">AFB</td>
    <td><input type="text" class="tabcell" name="AFB_0-3" value=7.0 /><td>
    <td><input type="text" class="tabcell" name="AFB_0-7" Bvalue=7.6/><td>
    ... 
<tr id="row_1" class="dataRow">
    <td name="resource">TANKERS</td>
    ... 

My jQuery code is:

function setRowLabels() {
    var row = [];
    var rowCategory = "";

    $('.dataRow').each(function(i) {
        // get the current resource abbreviation value
        rowCategory = $('td:eq(0) input', this).val();

        // replace the contents of the first column (an input field) with a td field
        $('td:eq(0)', this).replaceWith('<td name="resource">' + rowCategory + '</td>');

        var colName = "";
        // for each input field .... 
        $('input', this).each(function(j) {
            // get the current name
            currName = $('input').attr('name');
            $('input').attr('name', rowCategory + currName);
        });
    });
}  

But that is returning:

<tr id="row_0" class="dataRow">
    <td name="resource">AFB</td>
    <td><input type="text" class="tabcell" name="...TANKERSAFBAFBAFBAFBAFBAFBAFBAFB" value=7.0 /><td>
    <td><input type="text" class="tabcell" name="...TANKERSAFBAFBAFBAFBAFBAFBAFBAFB" Bvalue=7.6/><td>  

So it repeats the name/label from column 1 multiple times, plus the name/label from every other row.
Once again, any help/pointers are welcome.

Vic

Answer 1

Try to replace $('input') with $(this) in your inner loop.

$('input') returns every input and not only the current one.

function setRowLabels() {
    var row = [];
    var rowCategory = "";

    $('.dataRow').each(function(i) {
        // get the current resource abbreviation value
        rowCategory = $('td:eq(0) input', this).val();

        // replace the contents of the first column (an input field) with a td field
        $('td:eq(0)', this).replaceWith('<td name="resource">' + rowCategory + '</td>');

        var colName = "";
        // for each input field .... 
        $('input', this).each(function(j) {
            // get the current name
            currName = $(this).attr('name');
            //         ^^^^^^^^ $('input') calls every input and not only the current one.
            $(this).attr('name', rowCategory + currName);
            //^^^^
        });
    });
}  

Answer 2

Change this

    $('input', this).each(function(j) {
        // get the current name
        currName = $('input').attr('name');
        $('input').attr('name', rowCategory + currName);
    });

to this, and you should be closer

    $('input', this).each(function(j, input) {
        // get the current name
        currName = input.attr('name');
        input.attr('name', rowCategory + currName);
    });

$.each passes the index and object into the function, hence, instead of writing function(j) you can have function(j, input) and input will be the element you are looping