[solved] Autoselect a row in HtmlTable

Hi!

Does anyone how to autoselect a row in HtmlTable?

My problem is that i want to select a row in one HtmlTable and the selection will then select a row in another HtmlTable. I can't figure out how to get access to the rows in a HtmlTable.

Regards

Lets assume the above html.

First of all there are no "official" ways to "select" a row in a html table. So you will have to script the whole thing yourself.

You will have to add events to all the children of the table. I'm not in the habbit of giving all the code, since that doesnt teach anyone anything. So i'll explain the basics (atleast a way how i would do it).

First of all you will have to go through all the tr's of the form and add events to it.

Something like this would probably do:


The above code (should) set the global variable "selectedRow" with the number in the row id (i.e. when clicking on the row with id "row-1", selectedRow will be "1")

Things to take care of yourself:
- Remember the old selected row, so you can do something with background colors.
- Build this mess into a decent class
- Extend the event to do something with your other table

Had to write this in about 5 minutes. So I have no time to either test, nor make it more decent.

Hope this gets you in the right direction.

Ill try and answer your questions later on if you have any.

Thanks for your reply. It was not exactly what i was looking for. I am working with the mootools more HtmlTable object and all you have explaned is already in that object. My problem was that i couldn't find out how to autoselect a row in one HtmlTable from within another HtmlTable. I now have found the answer to my own question and i just want to tell how i did. Please write if you see any problems in the way i have chosen.



Since the HtmlTable behind is a javascript HtmlTableElement i could access the table rows by doing like in the first line:
table.body.rows which accesses the tr elements in the table's tbody tag but it returns a javascript HtmlCollection. With this HtmlCollection i can now call namedItem with an id or name string and the specific row is returned.

The second line in the above code does the same as if you had clicked on the row, with your mouse, in the HtmlTable. By calling the function focusRow, the row in the destination HtmlTable will be selected by adding the table-tr-selected class.

Regards