Solved

CHANGE COLOR QUESTION (AGAIN...)

Posted on 2003-11-20
9
255 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

739 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