How can I highlight a <tr> row when clicking it?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How can I highlight a <tr> row when clicking it?

Post by simonmlewis »

We need to highlight rows when they are clicked. Sounds easy enough.
Problem is, in the row there are Form Submit buttons, and one Ajax input field.

When we used an onclick event, it would render the value of the ajax field to be "True", rather than what should be in there.

It also seems to disable the Edit 'submit' buttons from passing over all the information to the following page.

So is there a nice little method for highlighting the row?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How can I highlight a <tr> row when clicking it?

Post by Celauran »

A click handler is how I'd approach this and I see no reason for the side effects. Other code interfering maybe. I'd literally just define a class for the highlighting and toggle the class on click.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How can I highlight a <tr> row when clicking it?

Post by simonmlewis »

It needs to be able to highlight as many rows as are clicked, it's so that admins can see what is "completed".
Any suggestions of how to code it?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How can I highlight a <tr> row when clicking it?

Post by Celauran »

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How can I highlight a <tr> row when clicking it?

Post by simonmlewis »

I cannot get it to work.
And I don't understand how it is knowing that the class "someclass" is assigned to that specific table??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How can I highlight a <tr> row when clicking it?

Post by Celauran »

simonmlewis wrote:I cannot get it to work.
Well post what you've got into a Fiddle and let's take a look.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How can I highlight a <tr> row when clicking it?

Post by simonmlewis »

Sorry I see what you are doing now.
You are basically saying any "<tr>" tag, is assigned to use that "someclass".
I have mouseover code working, so maybe that is disabling it.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How can I highlight a <tr> row when clicking it?

Post by Celauran »

simonmlewis wrote:You are basically saying any "<tr>" tag, is assigned to use that "someclass".
Right, exactly. You'd need to tailor that to your needs, add in any additional functionality you'd require on click, etc. I tried to keep the example as simple as possible.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How can I highlight a <tr> row when clicking it?

Post by simonmlewis »

Sure. I think because I have the following, it's not allowing it to work:

Code: Select all

<tr ";
      
      $resultrccart = mysql_query ("SELECT romancartcatid FROM subcategories WHERE subid = '$row->subid'");
      while ($rowrccart = mysql_fetch_object($resultrccart))
      {
        // is there a romancart cat id for out of stock?
        if (isset($rowrccart->romancartcatid))
        {
          // yes?  Then check if the romancart code has a hyphen in it
          if (preg_match("/-/i", "$row->romancode"))
          {
          echo " bgcolor='#009BF4'  onMouseOver=\"this.bgColor='#009BF4';\" onMouseOut=\"this.bgColor='#009BF4';\"";
          }
        } 
      }  mysql_free_result($resultrccart);
       
     
       
      if ($row->pause == "on") { echo " bgcolor='#FF7B00'";}
      else { echo " bgcolor='#ffffff' onMouseOver=\"this.bgColor='#E7E7E7';\" onMouseOut=\"this.bgColor='#FFFFFF';\"";}
      echo ">
It's being overridden. Bugger.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How can I highlight a <tr> row when clicking it?

Post by Celauran »

You really don't want any of that inline. Move it to classes and then use your logic to determine which class to display. Much cleaner.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How can I highlight a <tr> row when clicking it?

Post by simonmlewis »

Yes I know what you mean. some of it is old code, that we haven't replaced. And of course, as it's hard coded, it's taking priority.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How can I highlight a <tr> row when clicking it?

Post by Celauran »

Looks like a good time to clean that up, then, as it's causing problems with new functionality you're trying to implement.
thinsoldier
Forum Contributor
Posts: 367
Joined: Fri Jul 20, 2007 11:29 am
Contact:

Re: How can I highlight a <tr> row when clicking it?

Post by thinsoldier »

I literally do not remember the last time I've seen onMouseOut! You definitely need to move all that stuff to simple css classes.
Warning: I have no idea what I'm talking about.
Post Reply