Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Toggle cell color

Posted on 2002-06-06
4
Medium Priority
?
564 Views
Last Modified: 2008-02-01
I would like to be able to toggle between foreground and background colors of a cell in a table onClick.

The code below does not seem to work to change the background color of a cell.  I would appreciate it if someone could debug it for me or suggest some other code to accomplish this task.

Thank you.

<html>

<head>
<Script Language=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!--Hide script from old browsers
function CellColor(cellname) {
     if(document.all){
      cell = eval("document.all (" + cellname + ").style")
          if (cell.background == "'red'") {
              cell.background = "'white'"
     }
          else {
               cell.background = "'red'"
          }
          return false
          else {
          }
         
//end hiding script-->
</script>

</head>


<body>

<table border=1>
<tr>          
<td id="changeme" background="white"><span
 onClick="return CellColor('changeme')">A</span></td>
</tr>
</table>

</body>

</html>
0
Comment
Question by:gcassel
[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
4 Comments
 
LVL 30

Accepted Solution

by:
third earned 300 total points
ID: 7061128


<html>

<head>
<Script Language=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!--Hide script from old browsers
function CellColor(cellname) {
  if(document.all){
    var cell = eval("document.all." + cellname);
    if (cell.style.backgroundColor == 'red') {
      cell.style.backgroundColor = 'white';
      cell.style.color = 'red';
    }
    else if (cell.style.backgroundColor == 'white') {    
      cell.style.backgroundColor = 'red';
      cell.style.color = 'white';
    }
  }
}        
//end hiding script-->
</script>
</head>
<body>
<table border=1>
<tr>          
<td id="changeme" style="background-color:white;color:red" onClick="CellColor('changeme')">A</td>
</tr>
</table>
</body>
</html>
0
 

Expert Comment

by:jhully
ID: 7068441
I'd like to try
next:
(sorry may be it will be good only for IE)
it will also give you square form of table to colorize it
<head>
<script language="JScript">
<!--Hide script from old browsers
function CellColor(i,j)
{
    var cell = tblName.rows.item(i).cells.item(j);
    var col = cell.bgColor == "red" ? "white" : "red";
    cell.bgColor = col;
}        
//end hiding script-->
</script>

</head>


<body>

<table id="tblName">
<tr>          
     <td onclick="CellColor(0,0)"></td>
</tr>
</table>
</body>

</html>
0
 
LVL 30

Expert Comment

by:third
ID: 7145074
could you please justify the grade B??
0
 
LVL 1

Expert Comment

by:Computer101
ID: 7147568
A request has been made to change the grade.  If no input concerning the grade, I will change it.

The guidelines here.

How Do I Know What Grade to Give?
Although we use an A-D scale here at Experts Exchange, it works differently than, say, school grades. If one or more Experts' proposals are accepted as answers, they should usually be given an A or B grade, since they have taken the time to provide you with a working solution. If a possible solution is incomplete - ask for clarification or details before accepting the answer and grading it. People should not be given lower grades because of incorrect grammar or because you just accepted their answer or comment to close the question. Keep in mind, your question and any follow-up comments should be focused so that there can be a specific answer. The following is a good guideline to follow when grading:

A: The Expert(s) either provided you with a thorough answer or they provided you with a link to information that thoroughly answered your question. An "A" can also be given to any answer that you found informative or enlightening beyond the direct question that you asked.

B: The Expert(s) provided an acceptable solution, or a link to an acceptable solution, that you were able to use, although you may have needed a bit more information to complete the task.

C: Because Experts' reliability are often judged by their grading records, many Experts would like the opportunity to clarify if you have questions about their solutions. If you have given the Expert(s) ample time to respond to your clarification posts and you have responded to each of their posts providing requested information; or if the answers, after clarification, lack finality or do not completely address the issue presented, then a "C" grade is an option. You also have the option here of just asking Community Support to delete the question.

Remember, the Expert helping you today is probably going to be helping you next time you post a question. Give them a fair chance to earn an 'Excellent!' grade and they'll provide you with some amazing support


Computer101
E-E Moderator
0

Featured Post

Industry Leaders: 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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

618 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