File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Highlighting a row in a table Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Highlighting a row in a table" Watch "Highlighting a row in a table" New topic
Author

Highlighting a row in a table

Chuck Meduri
Ranch Hand

Joined: Nov 29, 2000
Posts: 48
Hi,
I have HTML page in which I have a table with a bunch of columns and rows. The first column is a checkbox and the second column is a button. When I click on the checkbox or the button, I am doing an edit of that row - by obtaining the information from columns 3 onwards and populating some form fields with the information obtained from the columns.
My question is how can I highlight the row that I have selected to edit and when I am done editing that row and saving it how can I scroll to that row in the table and keep it highlighted so that the user knows the row they just edited?
Any help or suggestions would be appreciated.
Thank you in advance.
Anonymous
Ranch Hand

Joined: Nov 22, 2008
Posts: 18944
If you are developing for IE 5.0 or above or Netscape 6 or above, then you can use the table object model and it's a sinch. If you are developing for older browsers, then you have to use the document object model and it's a little bit trickier, but still not too bad.
In the table object model you would give your table an ID and then you could traverse it like so:

To keep track of the current row you would not need the inner loop, but I just wanted to illustrate the table object model. You could use the row's rowIndex property in a variable to keep track of which row is selected. Then you could use style.background to "highlight" the row. If you are using any style sheets in your cells or other children, then you will have to set the background at the cell level instead of the row level. You could do this with the DOM like so:

Depending on the structure of your table, you may need to change your approach a little, but the basic idea should work for you. However you navigate the table, onClick in any of the table's children should:
1) Reset the background of the currently selected row.
2) Find the enclosing table row of the element that was clicked
3) Reset the variable that stores the current row to point to the new row.
4) Set the new row's background color to indicate the selection.
HTH
Chuck Meduri
Ranch Hand

Joined: Nov 29, 2000
Posts: 48
Hi Bodie,
I have been trying your suggestion, but no luck so far..
Here is what I have been trying:
(I have a bunch of forms on this page and 'adjIndex' is the index of the row that I am trying to edit and 'AdjustmentsTable' is the Id of the table whose rows I am trying to edit)
for(var j=0; j<document.forms.length; j++)
{
for(var i=0; i<document.forms[i].elements.length; i++)
{
var elementX = document.forms[j].elements[i];
if(elementX.id =="AdjustmentsTable")
{
for(var k=0; k<elementX.rows.length; k++)
{
if(elementX.rows[k].rowIndex == adjIndex)
elementX.rows[k].background = "#00FF00";
}
}
}
}
Can you take a look and point out if I am making in mistake. I am getting that error that 'elementX.id is not a object or is equal to null'.
Thank you in advance,
Chuck
Originally posted by Bodie Minster:
[B]If you are developing for IE 5.0 or above or Netscape 6 or above, then you can use the table object model and it's a sinch. If you are developing for older browsers, then you have to use the document object model and it's a little bit trickier, but still not too bad.
In the table object model you would give your table an ID and then you could traverse it like so:

To keep track of the current row you would not need the inner loop, but I just wanted to illustrate the table object model. You could use the row's rowIndex property in a variable to keep track of which row is selected. Then you could use style.background to "highlight" the row. If you are using any style sheets in your cells or other children, then you will have to set the background at the cell level instead of the row level. You could do this with the DOM like so:

Depending on the structure of your table, you may need to change your approach a little, but the basic idea should work for you. However you navigate the table, onClick in any of the table's children should:
1) Reset the background of the currently selected row.
2) Find the enclosing table row of the element that was clicked
3) Reset the variable that stores the current row to point to the new row.
4) Set the new row's background color to indicate the selection.
HTH [/B]

Anonymous
Ranch Hand

Joined: Nov 22, 2008
Posts: 18944
A couple of things come to mind.
1) If you have more than one HTML element with the same ID you will make your JavaScript angry. If you want the id of them all to be the same, try using the name property.
2) If you want to get several similarly named objects, try using document.getElementsByName(). It will return a collection that you can step through.
Let me know what you get.
jo ta
Greenhorn

Joined: May 10, 2006
Posts: 1
has anyone tried to do this highlighting row for a table with alternate row colors ?
Niki Nono
Ranch Hand

Joined: Mar 20, 2005
Posts: 256
assuming you will be creating the table in a loop why dont you just assign different styles to even and odd rows.



Life called,so here I am.<br />Cheers<br />Niki.:-)
 
Don't get me started about those stupid light bulbs.
 
subject: Highlighting a row in a table