SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast Robert Wydra's Avatar
    Join Date
    Mar 2004
    Location
    Ruda Slaska [Poland]
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing multiple <td>'s backgrounds

    Today my boss asked me to prepare him a function that would change table cell's background when a link inside this cell is clicked, and all others cells to default background.

    To achieve this I used:

    Code:
    function zmieniamy(idkomorki)
    	{
    	/* change all td's background white */
    	TD = document.getElementsByTagName('td');
    	for(i=0;i<TD.length;i++)
    	if(TD[i].name=='zmieniaj')
       TD[i].style.background='white';   
    	/* change the color that we want */
    	document.getElementById(idkomorki).style.background="pink";
    	}
    Now that works only in IE and in Mozilla once I click a link inside a cell, then some other link - the first cell keeps its pink background.

    Could you please take a look at the code that I wrote?
    Robert Wydra

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    #idkomorki {
    	width: 760px;
    	margin: 20px auto;
    }
    #idkomorki td {
    	width: 33%;
    	font: normal 12px arial, sans-serif;
    	color: maroon;
    	text-align: justify;
    	padding: 3px;
    	margin: 3px;
    	border: 1px #000 dashed;
    	background: buttonface;
    }
    #idkomorki td a:link {
    	color: purple;
    }
    #idkomorki td a:visited {
    	color: navy;
    }
    #idkomorki td a:hover {
    	color: crimson;
    }
    
    </style>
    <script type="text/javascript">
    
    initTable.defaultBG = 'buttonface';
    initTable.clickedBG = 'pink';
    
    function initTable()
    {
    	var idkomorki = document.getElementById('idkomorki');
    	var cell, c = 0, cells = idkomorki.getElementsByTagName('td');
    	while (cell = cells.item(c++))
    		cell.onclick = function(e)
    		{
    			e = (e) ? e : window.event;
    			var target = (e.srcElement) ? e.srcElement : (e.target) ? e.target : null;
    			if (null != target && target.nodeName.toUpperCase() == 'A')
    			{
    				this.style.background = initTable.clickedBG;
    				if (initTable.prevClicked && initTable.prevClicked != this)
    					initTable.prevClicked.style.background = initTable.defaultBG;
    				initTable.prevClicked = this;
    			}
    			return true;
    		}
    }
    
    onload = initTable;
    
    </script>
    </head>
    <body>
    <table id="idkomorki">
       <thead>
          <tr>
             <th>• 1 •</th>
             <th>• 2 •</th>
             <th>• 3 •</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <td>Etiam at dui. Maecenas metus tellus, <a href="#" onclick="return false;">condimentum</a> et, imperdiet at, cursus cursus, purus. Duis sollicitudin venenatis augue. Suspendisse aliquam faucibus ligula. Etiam eget orci. Aliquam nonummy nisl nec nisl.
             </td>
             <td>Etiam at dui. Maecenas metus tellus, condimentum et, imperdiet at, cursus cursus, purus. Duis sollicitudin venenatis augue. Suspendisse aliquam <a href="#" onclick="return false;">faucibus ligula</a>. Etiam eget orci. Aliquam nonummy nisl nec nisl.
             </td>
             <td>Etiam at dui. Maecenas metus tellus, condimentum et, imperdiet at, cursus cursus, purus. Duis sollicitudin venenatis augue. Suspendisse aliquam faucibus ligula. <a href="#" onclick="return false;">Etiam eget orci</a>. Aliquam nonummy nisl nec nisl.
             </td>
          </tr>
          <tr>
             <td>Etiam at dui. Maecenas metus tellus, condimentum et, imperdiet at, <a href="#" onclick="return false;">cursus cursus</a>, purus. Duis sollicitudin venenatis augue. Suspendisse aliquam faucibus ligula. Etiam eget orci. Aliquam nonummy nisl nec nisl.
             </td>
             <td>Etiam at dui. Maecenas metus tellus, condimentum et, imperdiet at, <a href="#" onclick="return false;">cursus cursus, purus</a>. Duis sollicitudin venenatis augue. Suspendisse aliquam faucibus ligula. Etiam eget orci. Aliquam nonummy nisl nec nisl.
             </td>
             <td>Etiam at dui. Maecenas metus tellus, condimentum et, imperdiet at, cursus cursus, purus. Duis sollicitudin venenatis augue. Suspendisse aliquam faucibus ligula. Etiam eget orci. Aliquam <a href="#" onclick="return false;">nonummy</a> nisl nec nisl.
             </td>
          </tr>
          <tr>
             <td>Etiam at dui. Maecenas metus tellus, condimentum et, imperdiet at, cursus cursus, purus. Duis sollicitudin venenatis augue. <a href="#" onclick="return false;">Suspendisse</a> aliquam faucibus ligula. Etiam eget orci. Aliquam nonummy nisl nec nisl.
             </td>
             <td>Etiam at dui. Maecenas metus tellus, condimentum et, imperdiet at, cursus cursus, purus. Duis sollicitudin venenatis augue. <a href="#" onclick="return false;">Suspendisse aliquam faucibus ligula</a>. Etiam eget orci. Aliquam nonummy nisl nec nisl.
             </td>
             <td><a href="#" onclick="return false;">Etiam at dui</a>. Maecenas metus tellus, condimentum et, imperdiet at, cursus cursus, purus. Duis sollicitudin venenatis augue. Suspendisse aliquam faucibus ligula. Etiam eget orci. Aliquam nonummy nisl nec nisl.
             </td>
          </tr>
       </tbody>
    </table>
    <div style="padding:40px;">
    <a href="#" onclick="alert('Yo.');return false;">dummy link</a>
    </div>
    </body>
    </html>
    
    ::: certified wild guess :::


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •