We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now


Change <td> attributes via DOM.. How to??

bemara57 asked
Medium Priority
Last Modified: 2010-05-18
I'm trying to created a click tab effect but need help. As it is I have two table cells with a class and onclick as so:

<td class="selectedtab" onclick="switchtab(0)" tab="tab1"><td class="tab" onclick="switchtab(1)" id="tab2">

What I'm trying to do is create a switchtab function that will change to class and onclick to opposites, like this:

<td class="tab" onclick="switchtab(1)" tab="tab1"><td class="selectedtab" onclick="switchtab(0)" id="tab2">

All I have is this:
function switchtab(select) {

How do I switch class and onclick attirbutes like this. Pls help. Thanks in advance for all the help.
Watch Question

Software Engineer
I'm sorry, but I don't quite understand what it is you are trying to do.  Di you mean the "before" to look like:

<td class="selectedtab" onclick="switchtab(0)" id="tab1"><td class="tab" onclick="switchtab(1)" id="tab2">

 and the after to look like:

<td class="tab" onclick="switchtab(1)" tab="tab1"><td class="selectedtab" onclick="switchtab(0)" id="tab2">

  Might this be what you want?

<script type='text/javascript'>
// See: http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_22037436.html
  function switchTd( id1, id2 ) {
    var td1 = document.getElementById( id1 );
    var td2 = document.getElementById( id2 );
    var temp = td1.className;
    td1.className = td2.className;
    td2.className = temp;
<table border='1' width='50%'>
    <td id='tab1' class='selectedtab' onclick='switchTd("tab1","tab2")'>Cell 1</td>
    <td id='tab2' class='tab'         onclick='switchTd("tab1","tab2")'>Cell 2</td>

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
HonorGodSoftware Engineer

Doing it this way, you wouldn't need to change the onclick attributes
var sel = null;
function select(tab) {
      if (sel != null)
            sel.className = 'tab';
      tab.className = 'selectedtab';
      sel = tab;
<td class="tab" onclick="select(this)">Tab1</td>
<td class="tab" onclick="select(this)">Tab2</td>
<td class="tab" onclick="select(this)">Tab3</td>
<td class="tab" onclick="select(this)">Tab4</td>


PERFECT!! Thanks again HonorGod.
HonorGodSoftware Engineer

No problem.  Thanks for the 'A'
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.