Table Length Access

[mjsulliv]

Hello all. I need to use JavaScript to read and manipulate data from a html table element. I’ve been looking to access the metrics of the table, length-in-rows and so on, to write looping constructs to get the data from it. First problem I’m having is the table element doesn’t seem to have a length attribute:

var x=document.getElementsByID("table_ID").length;

I’m also wondering if a continued access of html elements is the most efficient process or if first converting the table to a JavaScript array wouldn’t be better.Any thoughts would be much appreciated.--- Mike

[jeffman]

The table object has a rows[] property. Each tablerow object has a cells[] property. These are technically collections, so they do do support a length property, but they are not true arrays, so don't try to pop or push, etc.Looping through that junk and building a JavaScript object may in fact be the best idea, partly because you'll need 1-2 loops to get it all, and partly because accessing the DOM is always slower than accessing "pure" JavaScript data.Many browsers support a cells[] property for tables themselves, and this would simplify life considerably, but this is not standard, so I can't recommend it, even if it works. (It is not even standard in the HTML5 Draft, so relying on it is really a bad idea.)

[mjsulliv]

Hi Deirdre’s Dad, thanks for the response. Yes, I agree that will be the direction I’ll go, but I’m exploring the JS reference and tutorials looking for the best way to test for the end of the table. My experience in Java, testing for NULL doesn’t seem to work. Is the answer a try/catch construct or is there a better way. I would think that this might be a common issue and there is a standard / usual way for doing this.--- Mike

[jeffman]

Try/catch usually results from sloppy programming in JavaScript. It is best reserved for instances where a genuine chance of failure is guaranteed, as when IE and everyone else use the same function name but expect different parameters.I'm having a hard time even imagining where a try-catch would go. I'd have a better answer if I knew exactly what you wanted to try.Maybe I don't know what you mean by "the end of the table." The last cell in the last row? I think the following will return a reference to that cell:

mylastcell = mytable.rows[rows.length - 1].cells[cells.length - 1]

[mjsulliv]

Try/catch usually results from sloppy programming in JavaScript.

That’s essentially my view as well. What I want to do is write a JS loop that will load a JS array from a html table. My confusion comes from how to code the test condition for the loop so it knows when it’s done.--- Mike

[ShadowMage]

That's what the rows.length and cells.length properties are for.

[jeffman]

var i, j, lenrows, lencells, myrow, mycell;var mytable = document.getElementById("mySpecialTable");lenrows = mytable.rows.length;for (i = 0; i < lenrows; ++i) {   myrow = mytable.rows[i];   lencells = myrow.cells.length;   for (j = 0; j < lencells; ++j) {	  mycell = myrow.cells[j];	  // do something   }}

[mjsulliv]

lenrows = mytable.rows.length;

Yes. Obvious now. Still struggeling w/ DOMs properties / attributes syntax.Thank you very much.--- Mike

[jeffman]

Good advice for anyone:Use Firefox. Get the DOM Inspector add-on. Learn to use it. Select a page element on the left and examine all the available properties and methods on the right. If something looks promising, look it up on the schools website and see if it's available everywhere or only in Mozilla.A lot of what I know about the DOM came through this process. (Not overnight. Mostly as needed.)

[ShadowMage]

Good advice for anyone:Use Firefox. Get the DOM Inspector add-on. Learn to use it. Select a page element on the left and examine all the available properties and methods on the right. If something looks promising, look it up on the schools website and see if it's available everywhere or only in Mozilla.A lot of what I know about the DOM came through this process. (Not overnight. Mostly as needed.)

That sounds like it might be a handy tool to have...I think I'm gonna have to give it a shot.

[mjsulliv]

Good advice for anyone:Use Firefox. Get the DOM Inspector add-on. Learn to use it. Select a page element on the left and examine all the available properties and methods on the right. If something looks promising, look it up on the schools website and see if it's available everywhere or only in Mozilla.A lot of what I know about the DOM came through this process. (Not overnight. Mostly as needed.)

Does look cool -- Thanks!

[jeffman]

The weird thing is, DOM Inspector used to be built-in, not an add-on. I don't know why people don't talk about it all the time. I use it almost every time I get stuck. FWIW, it also shows an element's style rules, and the last one is the rule in effect, which is not always what you think it is. AND it show computed CSS values, which let's you know if your style settings are off somehow. I live by this thing.

[ShadowMage]

I haven't had a chance to really work with it much, but at a quick glance it does indeed look like a very powerful tool. Thanks for the great reference, DD.