• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Highlighting a row in a table

 
Ranch Hand
Posts: 48
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Ranch Hand
Posts: 18944
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 48
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 18944
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
has anyone tried to do this highlighting row for a table with alternate row colors ?
 
Ranch Hand
Posts: 256
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
assuming you will be creating the table in a loop why dont you just assign different styles to even and odd rows.

 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic