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.
bemara57Asked:
Who is Participating?
 
HonorGodConnect With a Mentor Software EngineerCommented:
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?

<html>
<head>
<title>Q_22037436.html</title>
<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;
  }
</script>
</head>
<body>
<table border='1' width='50%'>
  <tr>
    <td id='tab1' class='selectedtab' onclick='switchTd("tab1","tab2")'>Cell 1</td>
    <td id='tab2' class='tab'         onclick='switchTd("tab1","tab2")'>Cell 2</td>
  </tr>
</table>
</body>
</html>


0
 
HonorGodSoftware EngineerCommented:
Doing it this way, you wouldn't need to change the onclick attributes
0
 
daohailamCommented:
<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>
0
 
bemara57Author Commented:
PERFECT!! Thanks again HonorGod.
0
 
HonorGodSoftware EngineerCommented:
No problem.  Thanks for the 'A'
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.