[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 400
  • Last Modified:

Conditional Javascript highlight table row

I would like to highlight a table row which is above the condition which will highlight it.

Is there a clever way to get the id for an element which is above the calling script and tell it to highlight?

0
mjacobs2929
Asked:
mjacobs2929
  • 6
  • 3
1 Solution
 
HonorGodCommented:
By above, do you mean the table cell above a specific cell?


0
 
mjacobs2929Author Commented:
Yes. Above, as in the table cell I wish to highlight is in the code above the condition itself:
 
<tr id="highlight_this_table_row">
 <td>condition to set highlight is happening down here</td>
</tr>
0
 
HonorGodCommented:
So, in essence you want to:

- determine which cell is being referenced (within a row)
- locate the same cell in the preceding row

Right?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
HonorGodCommented:
or, do you just want to hilite the "current" row?
0
 
HonorGodCommented:
Next question, do you have a specific CSS class defined to be used to perform this hilighting?
0
 
mjacobs2929Author Commented:
Yes, it is the 'current row' I wish to highlight, but of course the <tr> tag is above the <td> cell where the condition is being determined, and hence, is already rendered by the time the condition code is run.

The class is:
.hilite, #page_content tr.hilite:hover {background: #FFFF99; color: #000000;}

The above is already working fine on the less tricky bits.
0
 
HonorGodCommented:
ok, so what you need is to execute some script to locate, and change the classname for the parent TR.

If the "current cell" has an id attribute, e.g., something like we see below, then during the processing of the cell, a function can be called, e.g.,

<td id='here'>...whatever...
  <script type='text/javascript'>hiliteRow('here')</script>
</td>

<tr id="highlight_this_table_row">
 <td id='here'>condition to set highlight is happening down here</td>
</tr>
 
function hiliteRow( id ) {
  var cell = document.getElementById( id )
  if ( cell ) {
    cell.parentNode.className = 'hilite'
  } else {
    alert( 'Specified element not found: id="' + id + '"' )
  }
}

Open in new window

0
 
mjacobs2929Author Commented:
Brilliant! My thanks again HonorGod!
0
 
HonorGodCommented:
Thanks for the grade & points.

Good luck & have a great day.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now