I'm populating a table from my database using .Net and within this application, I am then comparing the value the user has entered to the first column of every table row in the pre-populated table.

For some reason, when I loop through each row in the table and return the value in the first column...the value always stays the same when in fact i know its different by just looking at it on the screen and in the html source.

I throw up an alert message for each time it loops, and it its looping the correct amount of times, just not returning a the correct value.

Could someone please help me out here, please see code below.. HTML and Javascript...Thanks!

HTML:

<table id="tblProducts" name="tblProducts">

<tr>
<td id="tdProdNum">
3882
</td>
<td>
This is a vendor test to see if it reads them
</td>
<td>

</td>
</tr>

<tr>
<td id="tdProdNum">
7883
</td>
<td>
Test 3
</td>
<td>

</td>
</tr>

<tr>
<td id="tdProdNum">
8663
</td>
<td>
test
</td>
<td>

</td>
</tr>

</table>


JAVASCRIPT:

function checkValidItem(num) {
rows = document.getElementById('tblProducts').getElementsByTagName('TR');
var IsValid = new Boolean(false);
var col;
var i=0;
while (!IsValid || i<rows.length) {
col = rows[i].document.getElementById('tdProdNum').innerHTML
confirm(col + ', ' + i);

if (num == col) {
IsValid = true;
}
i++;
}
return IsValid;
}

ID is a unique attribute. As such, you can't have more than one table cell with the same ID. document.getElementById catches only the first occurrence of the object with the ID sent to the function and you will always be getting the first table cell with that ID. Use class instead and the following code in your loop:


col = rows[i].getElementsByTagName('TD');
for (var d = 0; d < col.length;d++) {
if (col[d].className == "tdProdNum") {
var contents = col[d].innerHTML;
confirm(d + ',' + contents);
}
}


See how that goes for you.

Works like a charm! I should have known that to begin with! Thanks!! :thumbsup: