Link to home
Start Free TrialLog in
Avatar of pjordanna
pjordanna

asked on

CHANGE COLOR QUESTION (AGAIN...)

Hi experts,

I have the following code:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function colorMe(obj,oId){
     var el = document.getElementById(obj);
     var e = document.getElementById(oId);
     if(document.getElementById){
          el.style.backgroundColor = 'red';
          el.firstChild.style.color = 'yellow';
          e.style.backgroundColor = '';
          e.firstChild.style.color = '';
     }
}
     
// -->
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="one"><a href="#" onclick="colorMe('one','two');return false;">TEST</a></td>
    <td id="two"><a href="#" onclick="colorMe('two','one');return false;">TEST 2</a></td>
  </tr>
</table>
</body>
</html>


I also have 2 10 row tables of data (TABLE1 AND TABLE2). I am trying to get only one of them to be displayed based on which link (TEST OR TEST2) is clicked.

Basically the table needs to sit directly under the table which you see in the code above. If TEST is clicked then TABLE1 should be displayed. If TEST 2 is clicked then TABLE2 should be displayed.

I am looking for the same kind of effect that could be achieved by a "swapImage".

Is this possible?




PJORDANNA
Avatar of devic
devic
Flag of Germany image
hi pjordanna,

u can use it without ids:

==========================
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
var lastobj=false;
var e=false;
function colorMe(obj)
{
   
      el = obj.parentNode;
    if(el)
      {
         el.style.backgroundColor = 'red';
         el.firstChild.style.color = 'ffffff';
      }
      if(e)
      {
         e.style.backgroundColor = '';
         e.firstChild.style.color = '';
    }
      e=obj.parentNode;
}
</script>
</head>
<body bgcolor=ffffff>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 
 <tr>
   <td><a href="#" onclick="colorMe(this);return false;">TEST 1</a></td>
   <td><a href="#" onclick="colorMe(this);return false;">TEST 2</a></td>
 </tr>
 
  <tr>
   <td><a href="#" onclick="colorMe(this);return false;">TEST 3</a></td>
   <td><a href="#" onclick="colorMe(this);return false;">TEST 4</a></td>
 </tr>
 
  <tr>
   <td><a href="#" onclick="colorMe(this);return false;">TEST 5</a></td>
   <td><a href="#" onclick="colorMe(this);return false;">TEST 6</a></td>
 </tr>
 
</table>
</body>
</html>
ASKER CERTIFIED SOLUTION
Avatar of devic
devic
Flag of Germany 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
Avatar of jaysolomon
jaysolomon
>>tbl.style.display="block";<<


change to

tbl.style.display="";

it will display better
Avatar of devic
devic
Flag of Germany image
>>>Basically the table needs to sit directly under the table which you see in the code above.

==================================
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function colorMe(obj,oId){
   var el = document.getElementById(obj);
   var e = document.getElementById(oId);
    var tbl = document.getElementById(obj+"tbl");
    var tbl2 = document.getElementById(oId+"tbl");
   if(document.getElementById){
        el.style.backgroundColor = 'red';
        el.firstChild.style.color = 'yellow';
          tbl.style.display="block";
          tbl2.style.display="none";
         
         e.style.backgroundColor = '';
        e.firstChild.style.color = '';
   }
}
   
// -->
</script>
</head>
<body bgcolor=ffffff>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td width=50% id="one"><a href="#" onclick="colorMe('one','two');return false;">TEST</a></td>
  <td width=50% id="two"><a href="#" onclick="colorMe('two','one');return false;">TEST 2</a></td>
</tr>

<tr>
  <td>
        <table style=display:none bgcolor=blue id=onetbl  width=100% cellspacing=0 cellpadding=0 border=1>
          <td>ONE</td>
      </table>
 
  </td>
  <td>
      <table style=display:none bgcolor=yellow id=twotbl width=100% cellspacing=0 cellpadding=0 border=1>
          <td>TWO</td>
      </table>  
  </td>
</tr>


</table>

<br><br>


</body>
</html>
Avatar of NetGroove
NetGroove
This is for controlling more then two tables:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var aId = ["C1", "C2", "C3", "C4"];
function colorMe(theObj){
  for(i=0;i<aId.length;i++){
    document.getElementById(aId[i]).style.backgroundColor='';
    document.getElementById(aId[i]).style.color='';
    document.getElementById("d"+aId[i]).style.display='none';
  }
  theObj.style.backgroundColor='red';
  theObj.style.color='yellow';
  document.getElementById("d"+theObj.id).style.display='block';
 
}
   
// -->
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td id="C1" onclick="colorMe(this)">TEST</td>
   <td id="C2" onclick="colorMe(this)">TEST 2</td>
   <td id="C3" onclick="colorMe(this)">TEST 3</td>
   <td id="C4" onclick="colorMe(this)">TEST 4</td>
 </tr>
</table>
<div id="dC1" style="display:none">
<table>
<tr><td>A</td></tr>
</table>
</div>
<div id="dC2" style="display:none">
<table>
<tr><td>B</td></tr>
</table>
</div>
<div id="dC3" style="display:none">
<table>
<tr><td>C</td></tr>
</table>
</div>
<div id="dC4" style="display:none">
<table>
<tr><td>D</td></tr>
</table>
</div>
</body>
</html>



Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
Try this it works on tables of any sizes

<table width="200" id="tab1">
  <tr>
    <td bgcolor="blue">f</td>
   <td bgcolor="pink">a</td>
   <td>b</td>
  </tr>
  <tr>
    <td bgcolor="red">f</td>
    <td>c</td>
    <td bgcolor="purple">d</td>
  </tr>
  <tr>
    <td bgcolor="blue">f</td>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

<p><br>
</p>

<table id="tab2" width="200">
  <tr>
    <td bgcolor="orange">f</td>
    <td bgcolor="green"></td>
    <td>a</td>
  </tr>
  <tr>
    <td bgcolor="blue">f</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td bgcolor="red">c</td>
    <td bgcolor="orange">c</td>
    <td bgcolor="green">d</td>
  </tr>
</table>
<a href="#" onClick="swap('tab1','tab2',3,3)">

<p>Swap Colors</a>
 <script>
function swap(tab1,tab2,cols,rows){
for (i=0;i<cols;i++)
  for (j=0;j<rows;j++)
    {c1=document.getElementById(tab1).rows[i].cells[j].bgColor
    c2=document.getElementById(tab2).rows[i].cells[j].bgColor
    document.getElementById(tab2).rows[i].cells[j].bgColor =c1
    document.getElementById(tab1).rows[i].cells[j].bgColor =c2
   
    }
}

</script>
Avatar of devic
devic
Flag of Germany image
again new try, without any id ;)


=======================
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function colorMe(obj)
{
      el=obj.parentNode.parentNode;
      n = el.firstChild.firstChild==obj?0:1;
      el.nextSibling.childNodes(n).style.display = "";
      el.nextSibling.childNodes(n==0?1:0).style.display = "none";
}
</script>
</head>
<body bgcolor=ffffff>
<table border="0" cellspacing="0" cellpadding="0">

<!-- one -->
<tr>
  <td><a href="#" onclick="colorMe(this);return false;">view table 1</a></td>
  <td><a href="#" onclick="colorMe(this);return false;">view table 2</a></td>
</tr>

 <tr>
  <td colspan=2 style=display:none>
        <table width=100% cellspacing=0 cellpadding=0 border=1 bgcolor=red>
            <td>TABLE1</td>
      </table>
  </td>
  <td  colspan=2 style=display:none>
        <table width=100% cellspacing=0 cellpadding=0 border=1 bgcolor=green>
            <td>TABLE2</td>
      </table>
  </td>
</tr>
<!-- /one -->

<!-- two -->
<tr>
  <td><a href="#" onclick="colorMe(this);return false;">view table 1</a></td>
  <td><a href="#" onclick="colorMe(this);return false;">view table 2</a></td>
</tr>

 <tr>
  <td colspan=2 style=display:none>
        <table width=100% cellspacing=0 cellpadding=0 border=1 bgcolor=red>
            <td>TABLE1</td>
      </table>
  </td>
  <td  colspan=2 style=display:none>
        <table width=100% cellspacing=0 cellpadding=0 border=1 bgcolor=green>
            <td>TABLE2</td>
      </table>
  </td>
</tr>
<!-- /two -->

<!-- ...... more...... -->
</table>
</body>
</html>
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
If you want the second table to be invisible then do this

<div  style="display:none">
<table width="200" id="tab1">
  <tr>
    <td bgcolor="blue">f</td><td bgcolor="pink">a</td><td>b</td>
  </tr>
  <tr>
    <td bgcolor="red">f</td><td>c</td><td bgcolor="purple">d</td>
  </tr>
  <tr>
    <td bgcolor="blue">f</td><td>a</td>  <td>b</td>
  </tr>
</table>
</div>
<table id="tab2" width="200" border=1>
  <tr>
    <td bgcolor="orange">f</td> <td bgcolor="green"></td> <td>a</td>
  </tr>
  <tr>
    <td bgcolor="blue">f</td> <td>a</td> <td>b</td>
  </tr>
  <tr>
    <td bgcolor="red">c</td><td bgcolor="orange">c</td><td bgcolor="green">d</td>
    </tr>
</table>
<a href="#" onClick="swap('tab1','tab2',3,3)">

<p>Swap Colors</a>
 <script>
function swap(tab1,tab2,cols,rows){
for (i=0;i<cols;i++)
  for (j=0;j<rows;j++)
    {c1=document.getElementById(tab1).rows[i].cells[j].bgColor
    c2=document.getElementById(tab2).rows[i].cells[j].bgColor
    document.getElementById(tab2).rows[i].cells[j].bgColor =c1
    document.getElementById(tab1).rows[i].cells[j].bgColor =c2  
    }
}
</script>

Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
This will also swap the HTML content of the cells,

<div  style="display:none">
<table width="600" id="tab1" border=1 cellpaddding="6">
  <tr width="200">
    <td bgcolor="blue">AAAAA</td><td bgcolor="pink">XXX</td><td>BBB</td>
  </tr>
  <tr width="200">
    <td bgcolor="red">BBBB</td><td>BEER!</td><td bgcolor="purple">d</td>
  </tr>
  <tr width="200">
    <td bgcolor="blue">f</td><td>YAWN</td>  <td>BEER!</td>
  </tr>
</table>
</div>
<table id="tab2" width="600" border=1 cellpaddding="6">
  <tr width="200">
    <td bgcolor="orange">ffff</td> <td bgcolor="green"></td> <td>Time for Bed</td>
  </tr>
  <tr width="200">
    <td bgcolor="blue">I am tired</td> <td>a</td> <td>ZZZzzzzz</td>
  </tr>
  <tr width="200">
    <td bgcolor="red">c</td><td bgcolor="orange">I like wine</td><td bgcolor="green">d</td>
    </tr>
</table>
<a href="#" onClick="swap('tab1','tab2',3,3)">

<p>Swap Colors</a>
 <script>
function swap(tab1,tab2,cols,rows){
for (i=0;i<cols;i++)
  for (j=0;j<rows;j++)
    {c1=document.getElementById(tab1).rows[i].cells[j].bgColor
    c2=document.getElementById(tab2).rows[i].cells[j].bgColor
    document.getElementById(tab2).rows[i].cells[j].bgColor =c1
    document.getElementById(tab1).rows[i].cells[j].bgColor =c2
    h1=document.getElementById(tab1).rows[i].cells[j].innerHTML
    h2=document.getElementById(tab2).rows[i].cells[j].innerHTML
    document.getElementById(tab2).rows[i].cells[j].innerHTML =h1
    document.getElementById(tab1).rows[i].cells[j].innerHTML =h2
    }
}

</script>