Solved

CHANGE COLOR QUESTION (AGAIN...)

Posted on 2003-11-20
9
253 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:pjordanna
9 Comments
 
LVL 25

Expert Comment

by:devic
ID: 9789109
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>
0
 
LVL 25

Accepted Solution

by:
devic earned 500 total points
ID: 9789169
for table:
=======================
<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 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>

<br><br>
<table style=display:none bgcolor=blue id=onetbl width=555 cellspacing=0 cellpadding=0 border=1>
      <td>ONE</td>
</table>

<table style=display:none bgcolor=yellow id=twotbl width=555 cellspacing=0 cellpadding=0 border=1>
      <td>TWO</td>
</table>

</body>
</html>
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9789190
>>tbl.style.display="block";<<


change to

tbl.style.display="";

it will display better
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 25

Expert Comment

by:devic
ID: 9789194
>>>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>
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9789587
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>



0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9789937
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>
0
 
LVL 25

Expert Comment

by:devic
ID: 9790156
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>
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9791603
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>

0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9791735
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>


0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
where is team.js? 3 30
Javascript Form Change 5 31
Not allowed to load local recource. 4 33
Html CheckBox obtain Its Value 5 27
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question