Solved

onclick change content

Posted on 2008-10-02
3
506 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
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
Comment Utility
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
Comment Utility
thank u genius.
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
you are welcome
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now