Member Avatar for vcombs

I am displaying data in a table on one of my web pages. When the user clicks on a row, I want that row ONLY to change color. I'd settle for that cell. I have a css file referenced on the page with two styles, td_on and td_off, which have same settings except for the background colors. I put the "class" tag in the td like so: <td align="center" class="td_off" >

I have tried to use the onclick action to change the class to the td_on style like so, onclick="class=td_on" but this does NOT cause any changes. Can someone tell me what the proper syntax for doing this is ... or maybe an easier way to accomplish what I want???!

TIA

  • 5 Contributors
  • 6 Replies
  • 509 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by MasonShew

Dani AI

Generated

Short answer: the browser won't accept onclick="class=td_on" because class is not a JavaScript variable or a valid way to change an element's class. A clean, modern solution is to add a single click listener to the table (event delegation), add a selected class to the clicked row (or cell), and remove that class from any previously selected row. That keeps HTML free of inline JS, avoids the deprecated bgcolor attribute, and scales to many rows.

Example (unobtrusive JS + class toggle):

var table = document.querySelector('table#myTable');
table.addEventListener('click', function (e) {
  var row = e.target.closest('tr');
  if (!row) return;
  var prev = table.querySelector('tr.selected');
  if (prev) prev.classList.remove('selected');
  row.classList.add('selected');
});

CSS to show the selection:

tr.selected td { background-color: #e6f2ff; }

Notes and troubleshooting

  • If rows contain links, check e.target.tagName and skip changing selection when an anchor was clicked, or handle navigation intentionally.
  • For keyboard support add tabindex="0" to rows and handle Enter/Space to toggle selection; also set aria-selected="true" on the chosen row for accessibility.
  • classList and closest are standard in modern browsers; for very old browsers fall back to element.className and a parent-node loop to find the <tr>.
  • About earlier replies: 's hover technique is fine for hover feedback but doesn't persist a click-selection. 's bgcolor approach works but is deprecated. 's suggestion to switch all rows to IDs is not practical when you have many rows. 's pointers to table libraries are worth exploring when you need sorting, paging, or advanced row behaviors.

Recommended Answers

All 6 Replies

Member Avatar for pajac

Maybe u could try onclick="id='td_off'" . I'm not exacly shure if it is the write sintax, maybe it has to be something infront of " style='td_of' ", like TD or something. But I think this works.I'm new here to! ;)
Try and reply!

Ok I tried it myselfe and the only problem is vith IE couse u have to alow a "popup" if u wont it to work. :(
Firefox goes OK! :o

Member Avatar for pajac

Use ID instead of class in css.

dont .something but #something ok.

Member Avatar for 2ndPlatform

I am displaying data in a table on one of my web pages. When the user clicks on a row, I want that row ONLY to change color. I'd settle for that cell. I have a css file referenced on the page with two styles, td_on and td_off, which have same settings except for the background colors. I put the "class" tag in the td like so: <td align="center" class="td_off" >

I have tried to use the onclick action to change the class to the td_on style like so, onclick="class=td_on" but this does NOT cause any changes. Can someone tell me what the proper syntax for doing this is ... or maybe an easier way to accomplish what I want???!

TIA

Here - if you haven't gotten it, try this:

This should be your TD in your HTML:

<td class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'"><a href="page.php">LINK</a></td>

Then in your stylesheet:

.over { background-color:#D0C0A9; padding-top: 2px; padding-bottom:2px;} 
.out { background-color: #E1D4C0; padding-top: 2px; padding-bottom:2px;}

That should do it for ya!

Let me know if you have problems, I'd be glad to help.

Shannon
Second Platform

Member Avatar for pajac

God solution 2ndPlatform! :D
I'm missing some experiences at this field, but doing on that too. :mrgreen:

Member Avatar for billbob12345678

I am displaying data in a table on one of my web pages. When the user clicks on a row, I want that row ONLY to change color. I'd settle for that cell. I have a css file referenced on the page with two styles, td_on and td_off, which have same settings except for the background colors. I put the "class" tag in the td like so: <td align="center" class="td_off" >

I have tried to use the onclick action to change the class to the td_on style like so, onclick="class=td_on" but this does NOT cause any changes. Can someone tell me what the proper syntax for doing this is ... or maybe an easier way to accomplish what I want???!

TIA

ok so here is what i used. i got the same situation you did. kinda. anyway if your just changing the background of a cell onClick do this <td onClick="this.bgcolor='000000'"> and for rows this <tr onClick="this.bgcolor='000000'"> now obviously you can change the colors as needed or desired but this worked for me.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.