Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 262
  • Last Modified:

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
0
pjordanna
Asked:
pjordanna
1 Solution
 
devicCommented:
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
 
devicCommented:
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
 
jaysolomonCommented:
>>tbl.style.display="block";<<


change to

tbl.style.display="";

it will display better
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
devicCommented:
>>>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
 
NetGrooveCommented:
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
 
GwynforWebCommented:
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
 
devicCommented:
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
 
GwynforWebCommented:
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
 
GwynforWebCommented:
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now