Jump to content

Table Length Access


mjsulliv
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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]

Edited by Deirdre's Dad
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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   }}

Link to comment
Share on other sites

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.)

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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!
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...