Changing the color of a cell 2

agoia · Jan 10, 2006

I have a table whith 1 row and 5 columns. When I click a cell, I want that cell to become green and the others - white. How can be done this?

ca8msm · Jan 10, 2006

Give each cell an id, use getElementById to get a reference to each element and the use the style property to set the background colour.

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

kaht · Jan 10, 2006

Or create a "selected" class and apply that class when the cell is clicked. You can use the DOM to traverse the other elements of the table to remove "selected" status from the other cells. Here's a quick example:

Code:

<html>
<head>
<style type="text/css">

table {
   border-collapse:collapse;
}

td {
   border:1px solid #000000;
   background-color:#ffffff;
   padding:3px;
}

td.sel {
   background-color:#00ff00;
}

</style>

<script type="text/javascript">
function blah(obj) {
   var rowObj = obj.parentNode;
   for (i = 0; i < rowObj.childNodes.length; i++) {
      //this line prevents firefox from treating whitespace as a childNode
      if (rowObj.childNodes[i].style) {
         rowObj.childNodes[i].className = (rowObj.childNodes[i] == obj) ? "sel" : "";
      }
   }
}
</script>
</head>

<body>
   <table>
     <tr>
       <td onclick="blah(this)">cell1</td>
       <td onclick="blah(this)">cell2</td>
       <td onclick="blah(this)">cell3</td>
       <td onclick="blah(this)">cell4</td>
       <td onclick="blah(this)">cell5</td>
     </tr>
   </table>
</body>
</html>

-kaht

How much you wanna make a bet I can throw a football over them mountains?

vongrunt · Jan 10, 2006

Heh, i wrote this: [smile]

Code:

<script language="javascript">
function blah(obj) 
{	for (var node = obj.parentNode.firstChild; node; node = node.nextSibling)
		if (node.nodeType!=3 && node.tagName=="TD") 
			node.className = (node==obj)? "sel": "";
}
</script>

------
"There's a man... He's bald and wears a short-sleeved shirt, and somehow he's very important to me. I think his name is Homer."
(Jack O'Neill, Stargate)
[banghead]

kaht · Jan 10, 2006

great minds..... [thumbsup2]

-kaht

How much you wanna make a bet I can throw a football over them mountains?

spykat · Jan 11, 2006

Here's one:

Code:

<script language="JavaScript" type="text/javascript">
var boxColor="ffffff"

var ns6=document.getElementById&&!document.all
var highlightcolor="#ooff00"

var ns6=document.getElementById&&!document.all
var previous=''
var eventobj

//Regular expression to highlight only form elements
var intended=/INPUT|TEXTAREA|SELECT|OPTION/

//Function to check whether element clicked is form element
function checkel(which){
if (which.style&&intended.test(which.tagName)){
if (ns6&&eventobj.nodeType==3)
eventobj=eventobj.parentNode.parentNode
return true
}
else
return false
}

//Function to highlight form element
function highlight(e){
eventobj=ns6? e.target : event.srcElement
if (previous!=''){
if (checkel(previous))
previous.style.backgroundColor=''
previous=eventobj
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
}
else{
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
previous=eventobj
}
}
</script>

<form name="myForm" onClick="highlight(event)"onKeyUp="highlight(event)">

kaht · Jan 12, 2006

Since the OP has apparently abandoned this thread, I just wanted to point out that I found your post extremely valuable vongrunt. It will undoubtedly help me out in the future. Have a big, fat, juicy, purple star.

-kaht

How much you wanna make a bet I can throw a football over them mountains?

agoia · Jan 16, 2006

Your answers solved my problem. Great thanks to everybody!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Changing the color of a cell 2

agoia

Programmer

ca8msm

Programmer

kaht

Programmer

vongrunt

Programmer

kaht

Programmer

spykat

Technical User

kaht

Programmer

agoia

Programmer

Similar threads

Part and Inventory Search

Sponsor