Solved

onclick change content

Posted on 2008-10-02
3
513 Views
Last Modified: 2012-05-05
a table with few cells.
onclick i want the data and the image in the above <div id="data"> to change based on the arrays declared in relation to the <td ids..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <style>
        .bg {
                background-color:red;
        }
  </style>
  <script>
    function hiLight(el)
    {
      var tds = document.getElementsByTagName('TD');
      for(i=0; i< tds.length;i++)
      {
        tds[i].className="";
      }
      el.className="bg";
    }
 
	var dLines=new Array();	
		dLines[0]="Hello 123";
		dLines[1]="Hi 234";
		dLines[2]="time 12";
		dLines[3]="god 233";
		dLines[4]="boy 12";
		dLines[5]="woman 23";
		dLines[6]="girl 232";
		dLines[7]="man 233";
		dLines[8]="bat 12";
		dLines[9]="rat 23";
		dLines[10]="kite 232";
		dLines[11]="rabbit 233";
	var bannerImg = new Array();
		  bannerImg[0]="0.gif";
		  bannerImg[1]="1.gif";
		  bannerImg[2]="2.gif";
		  bannerImg[0]="3.gif";
		  bannerImg[1]="4.gif";
		  bannerImg[2]="5.gif";
		  bannerImg[0]="6.gif";
		  bannerImg[1]="7.gif";
		  bannerImg[2]="8.gif";
		  bannerImg[0]="9.gif";
		  bannerImg[1]="10.gif";
		  bannerImg[2]="11.gif";
  </script>
 </head>
 <body>
  <div id="data" style="border:1px solid blue">
    Hello 123   <br /><img src="0.gif" border="1"/>
  </div>
  <table width="500px" border="2" cellpadding="2" >
  <tr bgcolor="#99CCFF">
        <td id="0" class="bg" onclick="hiLight(this)">hello</td>
        <td id="1" onclick="hiLight(this)">hi</td>
        <td id="2" onclick="hiLight(this)">time</td>
  </tr>
  <tr bgcolor="white">
        <td id="3" onclick="hiLight(this)">god</td>
        <td id="4" onclick="hiLight(this)">boy</td>
        <td id="5" onclick="hiLight(this)">woman</td>
  </tr>
  <tr bgcolor="#99CCFF">
        <td id="6" onclick="hiLight(this)">girl</td>
        <td id="7" onclick="hiLight(this)">man</td>
        <td id="8" onclick="hiLight(this)">bat</td>
  </tr>
  <tr bgcolor="white">
        <td id="9" onclick="hiLight(this)">rat</td>
        <td id="10" onclick="hiLight(this)">kite</td>
        <td id="11" onclick="hiLight(this)">rabbit</td>
  </tr>
  </table>
 </body>
</html>

Open in new window

0
Comment
Question by:vidhubala
[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
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 22628549
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <style>
        .bg {
                background-color:red;
        }
  </style>
  <script>
/*
     function hiLight(el)
    {
      var tds = document.getElementsByTagName('TD');
      for(i=0; i< tds.length;i++)
      {
        tds[i].className="";
      }
      el.className="bg";
    }
    */
      var dLines=new Array();      
            dLines[0]="Hello 123";
            dLines[1]="Hi 234";
            dLines[2]="time 12";
            dLines[3]="god 233";
            dLines[4]="boy 12";
            dLines[5]="woman 23";
            dLines[6]="girl 232";
            dLines[7]="man 233";
            dLines[8]="bat 12";
            dLines[9]="rat 23";
            dLines[10]="kite 232";
            dLines[11]="rabbit 233";
		  /*
      var bannerImg = new Array();
              bannerImg[0]="0.gif";
              bannerImg[1]="1.gif";
              bannerImg[2]="2.gif";
              bannerImg[0]="3.gif";
              bannerImg[1]="4.gif";
              bannerImg[2]="5.gif";
              bannerImg[0]="6.gif";
              bannerImg[1]="7.gif";
              bannerImg[2]="8.gif";
              bannerImg[0]="9.gif";
              bannerImg[1]="10.gif";
              bannerImg[2]="11.gif";
		    */
var prev=null;
function hiLight(el)
{
	if( prev )
		prev.className="";
	el.className="bg";
	prev=el;
	document.getElementById("data").innerHTML=dLines[el.id]+'<img src="'+el.id+'.gif" border="1"/>';
}
window.onload=function(){hiLight(document.getElementById('0'));};
  </script>
 </head>
 <body>
  <div id="data" style="border:1px solid blue"></div>
  <table width="500px" border="2" cellpadding="2" >
  <tr bgcolor="#99CCFF">
        <td id="0" class="bg" onclick="hiLight(this)">hello</td>
        <td id="1" onclick="hiLight(this)">hi</td>
        <td id="2" onclick="hiLight(this)">time</td>
  </tr>
  <tr bgcolor="white">
        <td id="3" onclick="hiLight(this)">god</td>
        <td id="4" onclick="hiLight(this)">boy</td>
        <td id="5" onclick="hiLight(this)">woman</td>
  </tr>
  <tr bgcolor="#99CCFF">
        <td id="6" onclick="hiLight(this)">girl</td>
        <td id="7" onclick="hiLight(this)">man</td>
        <td id="8" onclick="hiLight(this)">bat</td>
  </tr>
  <tr bgcolor="white">
        <td id="9" onclick="hiLight(this)">rat</td>
        <td id="10" onclick="hiLight(this)">kite</td>
        <td id="11" onclick="hiLight(this)">rabbit</td>
  </tr>
  </table>
 </body>
</html>

Open in new window

0
 

Author Closing Comment

by:vidhubala
ID: 31502552
thank u genius.
0
 
LVL 82

Expert Comment

by:hielo
ID: 22629946
you are welcome
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

690 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