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.
<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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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)">Tab 1</td>
<td class="tab" onclick="select(this)">Tab 2</td>
<td class="tab" onclick="select(this)">Tab 3</td>
<td class="tab" onclick="select(this)">Tab 4</td>
</tr>
<tr>
<td>V1</td><td>V2</td><td> V3</td><td >V4</td>
</tr>
</table>
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)">Tab
<td class="tab" onclick="select(this)">Tab
<td class="tab" onclick="select(this)">Tab
<td class="tab" onclick="select(this)">Tab
</tr>
<tr>
<td>V1</td><td>V2</td><td>
</tr>
</table>
ASKER
PERFECT!! Thanks again HonorGod.
No problem. Thanks for the 'A'