Link to home
Start Free TrialLog in
Avatar of bemara57
bemara57

asked on

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

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) {
     getElementByID(tab1)
              ...
     getElementByID(tab2)
              ...
}

How do I switch class and onclick attirbutes like this. Pls help. Thanks in advance for all the help.
ASKER CERTIFIED SOLUTION
Avatar of HonorGod
HonorGod
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Doing it this way, you wouldn't need to change the onclick attributes
<script>
var sel = null;
function select(tab) {
      if (sel != null)
            sel.className = 'tab';
      tab.className = 'selectedtab';
      sel = tab;
}
</script>
...
<table>
<tr>
<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>
</tr>
<tr>
<td>V1</td><td>V2</td><td>V3</td><td>V4</td>
</tr>
</table>
Avatar of bemara57
bemara57

ASKER

PERFECT!! Thanks again HonorGod.
No problem.  Thanks for the 'A'