First, a few things you need to change:
- Remove that
type="number"
attribute from your td-tag. The type-attribute only applies to input-tags - User classes in place of ids (for p_no_in_stock and p_reorder_quantity). IDs are intended for unique items (aka: appear on the screen only once), while classes do not have this limitation. And since you are generating td's in a loop... chances are pretty high that you will have more than 1 of these.
Take a look at this this fiddle: http://jsfiddle.net/FTh4m/ to see a working some working code (it assumes you have jQuery on the page).
If you're not too familiar with jQuery, I can explain what each line is doing.
As for why what you currently have doesn't work... the explanation in rather long, but I'll do my best to explain:
The select you have ($('#example tbody tr td')
) is going to return an array of ALL td's on the screen.
And when you do document.getElementById()
, it will only grab the first instance of that ID that it finds in the DOM (I think IE actually search bottom-up, but that's a story for another day).
So in that each-loop, you are actually going through every single td on the page, not just the td's you care about.
A pro-tip for the future, when trying to debug this type of client-side JS, open the Chrome Dev Tools (or FireBug, if you're a FireFox kind of person) and start testing your jQuery selectors in the console.