Loop through row and set value of input

[Question Boy]

I have a table which has rows setup as shown below, where the number
between [] gets incremented row by row.

<tr>
<td><input name="Item_Id[0]" type="text" value="23" readonly="true"
tabindex="0" /></td>
<td><input name="Item[0]" type="text" value="Database Support" /></
td>
<td>$<input name="Cost[0]" type="text" value="85.00" /></td>
<td><input name="Sort_Order[0]" type="text" value="1"/><img
src="images/element_down.png" width="16px" height="16px"
onclick="move(this,'down');" /><img src="images/element_up.png"
width="16px" height="16px" onclick="move(this,'up');" /></td>
</tr>

I need to build a script that will loop through the row in the table a
renumber the value found in the Sort_Order[] input to match the row
number (1,2,3,...).

I started digging and found that I could use something like:

var loTable=document.getElementById("pricing");
for(var liCount=1;liCount<loTable.rows.length-1;liCount++){

}

but do not know how to continue the code to change the value of that
specific input.

I thank you in advance for your help and guidance,

QB

 

[Question Boy]

I have a table which has rows setup as shown below, where the number
between [] gets incremented row by row.

       <tr>
                <td><input name="Item_Id[0]" type="text" value="23" readonly="true"
tabindex="0" /></td>
                <td><input name="Item[0]" type="text"value="Database Support" /></
td>
                <td>$<input name="Cost[0]" type="text" value="85.00" /></td>
                <td><input name="Sort_Order[0]" type="text" value="1"/><img
src="images/element_down.png" width="16px" height="16px"
onclick="move(this,'down');" /><img src="images/element_up.png"
width="16px" height="16px" onclick="move(this,'up');" /></td>
        </tr>

I need to build a script that will loop through the row in the table a
renumber the value found in the Sort_Order[] input to match the row
number (1,2,3,...).

I started digging and found that I could use something like:

        var loTable=document.getElementById("pricing");
        for(var liCount=1;liCount<loTable.rows.length-1;liCount++){

        }

but do not know how to continue the code to change the value of that
specific input.

I thank you in advance for your help and guidance,

QB

I ended up finding the following solution:

var loTable=document.getElementById("pricing");
for(var liCount=1;liCount<loTable.rows.length-1;liCount++){

loTable.rows[liCount].cells[3].getElementsByTagName('input')[0].value
= liCount;
}

That said, if there is a better approach, I would love to learn.

Thank you once again,

QB

 

[RobG]

I have a table which has rows setup as shown below, where the number
between [] gets incremented row by row.

       <tr>
                <td><input name="Item_Id[0]" type="text" value="23" readonly="true"
tabindex="0" /></td>
                <td><input name="Item[0]" type="text" value="Database Support" /></
td>
                <td>$<input name="Cost[0]" type="text" value="85.00" /></td>
                <td><input name="Sort_Order[0]" type="text" value="1"/><img
src="images/element_down.png" width="16px" height="16px"
onclick="move(this,'down');" /><img src="images/element_up.png"
width="16px" height="16px" onclick="move(this,'up');" /></td>
        </tr>

I need to build a script that will loop through the row in the table a
renumber the value found in the Sort_Order[] input to match the row
number (1,2,3,...).

I started digging and found that I could use something like:

        var loTable=document.getElementById("pricing");
        for(var liCount=1;liCount<loTable.rows.length-1;liCount++){

        }

but do not know how to continue the code to change the value of that
specific input.

I thank you in advance for your help and guidance,

QB

I ended up finding the following solution:

        var loTable=document.getElementById("pricing");
        for(var liCount=1;liCount<loTable.rows.length-1;liCount++){

It is more efficient to store loTable.rows.length and re-use it. I
guess you have a reason for not processing the first or last rows, so:

for(var i=1, len=loTable.rows.length-1; i<len; i++) {

loTable.rows[liCount].cells[3].getElementsByTagName('input')[0].value
= liCount;
        }

That said, if there is a better approach, I would love to learn.

If there is only one Sort_Order input per row, you could use:

var loTable=document.getElementById('pricing'),
inputs = loTable.getElementsByTagName('input'),
input,
n = 1,
re = /^Sort_Order/;

for (var i=0, iLen=inputs.length; i<iLen; i++) {
input = inputs;
if (re.test(input.name)) {
input.value = n++;
}
}

Which will sequentially number the Sort_Order inputs, regardless of
where they appear in the table.

You might also consider a querySelectorAll[1] (qSA) fork that will
return an array of just the inputs with name starting with
"Sort_Order", falling back to the above loop if querySelectorAll is
not supported, e.g.

var loTable=document.getElementById('pricing'),
inputs = loTable.getElementsByTagName('input'),
input, i, iLen, n, re;

// qSA fork
if (loTable.querySelectorAll) {
inputs = loTable.querySelectorAll('input[name^="Sort_Order"]');

for (i=0, iLen=inputs.length; i<iLen; i++) {
inputs.value = i+1;
}

// Others
} else {
n = 1;
re = /^Sort_Order/;

for (i=0, iLen=inputs.length; i<iLen; i++) {
input = inputs;

if (re.test(input.name)) {
input.value = n++;
}
}
}


A number of browsers support qSA, but it may be more hassle than it's
worth.

1. <URL: http://www.w3.org/TR/selectors-api/#nodeselector >