?
Solved

highlight a row by clicking a checkbox like hotmail?

Posted on 2006-05-22
8
Medium Priority
?
551 Views
Last Modified: 2008-03-10
Hi Experts,
I have got a table with a column having checkboxes. I need a function when the checkbox is checked, then highlight that row. So if a user checked multiple checkboxes, it will hightlight multiple rows.

Thanks,
Lijunguo
0
Comment
Question by:lijunguo
  • 4
  • 3
8 Comments
 
LVL 22

Accepted Solution

by:
Ivo Stoykov earned 1400 total points
ID: 16733140
Hello lijunguo,

here's a sample

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function colorMe(el)
{
  while(el.tagName != 'TR') { el = el.parentElement; }
  el.bgColor= (el.bgColor=='#ff0000' ? '#ffffff' : '#ff0000');
}  // end function
//-->
</SCRIPT>
</HEAD>

<BODY>
<table border=1>
<tr><td><INPUT TYPE="checkbox" NAME="chb" onclick="colorMe(this)"></td>
  <td>A</td><td>C</td></tr>
</table>
</BODY>
</HTML>


HTH

I
0
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 600 total points
ID: 16733172
Check this:

<html>
<head>
<title>Zvonko &#42;</title>
<script>
function checkBox(e){
  var src = (e.target)?e.target:e.srcElement;
  if(src.type=="checkbox"){
    var theRow = src.parentNode;
    while(theRow&&theRow.nodeName!="TR"){
      theRow = theRow.parentNode;
    }
    if(src.checked){
      theRow.style.backgroundColor="silver";
    } else {
      theRow.style.backgroundColor="";
    }  
  }
}
</script>
</head>
<body>
<form onClick="this.onkeyup()" onKeyUp="checkBox(event)">
<table>
<tr><td>
<input type=checkbox name="C1" value="A">
</td><td>
Some text for this Row A
</td></tr>
<tr><td>
<input type=checkbox name="C2" value="B">
</td><td>
Some text for this Row B
</td></tr>
<tr><td>
<input type=checkbox name="C3" value="C">
</td><td>
Some text for this Row C
</td></tr>
</table>
</form>
</body>
</html>

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16733176
Sorry Ivo, I did not refresh.
0
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!

 
LVL 11

Author Comment

by:lijunguo
ID: 16733205
Thanks a lot! Your two guys are so great and quick. Both solutions are working fine. I still have a question, no one post a comment yet, if you can help, I'll appreciate it.

Regards,
Lijunguo
0
 
LVL 11

Author Comment

by:lijunguo
ID: 16733218
Because ivostoykov posted first, and it's working. So I accepted it as a answer and split the points.
Here is the link for another question.
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21853177.html

Regards,
Lijunguo
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16733231
Thanks for points split.
0
 
LVL 11

Author Comment

by:lijunguo
ID: 16733315
Hi Zvonko,
Thanks for your help, here is another new question you may help me.
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21858974.html

Regards,
Lijunguo
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16733939
Too late :)
0

Featured Post

Independent Software Vendors: 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

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-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…
Suggested Courses

850 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