?
Solved

Table On Hover highlighting and checkboxes

Posted on 2007-08-07
20
Medium Priority
?
2,000 Views
Last Modified: 2013-11-05
Ok, so I have a table full of data. When the user moves the mouse over any area of the table with data (not the header) the row should highlight... if the user clicks the mouse, it should check a check box....

I tryed to use the CSS style :hover ... but the browser we are using does not support it. ( IE: 6.0.2900.2180 )

Here is a example of the table...

<TABLE>
      <TR>
            <TD>
                  Title1
            </TD>
            <TD>
                  Title2
            </TD>
            <TD>
                  Title3
            </TD>
            <TD>
                  Title4
            </TD>
      </TR>
      <TR>
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeName" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR>
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeOtherName" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR>
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeName1" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR>
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeNameD" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR>
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeNameSD" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR>
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeNameB" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
</TABLE>
0
Comment
Question by:JoshWegener
  • 10
  • 8
  • 2
20 Comments
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 400 total points
ID: 19649515
You will need to use Javascript to change the style.  You can do it with something like ...

<tr onmouseover="this.style.backgroundColor='newcolor';" onmouseout="this.style.backgroundColor='oldcolor';">

Let me know the color you want to use if you have questions about that part.  Let me know if you have any questions about using this.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19649532
By the way, currently browsers (not just IE) only support pseudo classes like hover for anchor tags.  Other support is limited but is suppose to increase in the future with CSS 3 and browser support of it.

bol
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 19649657
Ok, so I came up with this.....

<STYLE>
      table {
            border-collapse: collapse;
            margin: 0px 0px 0px 0px;
            padding: 0px;
            border: 0px;
            text-align: left;
            vertical-align: top;
      }
</STYLE>
<TABLE>
      <TR>
            <TD>
                  Title1
            </TD>
            <TD>
                  Title2
            </TD>
            <TD>
                  Title3
            </TD>
            <TD>
                  Title4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';">
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeName" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';">
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeOtherName" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';">
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeName1" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';">
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeNameD" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';">
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeNameSD" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';">
            <TD>
                  <INPUT TYPE="CheckBox" NAME="SomeNameB" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
</TABLE>

How about checking the check box when the user clicks on a row??
0
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!

 
LVL 1

Author Comment

by:JoshWegener
ID: 19649746
I tryed

onClick="document.getElementById('SomeName').checked = !(this.checked);"

but that does not seem to work...
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 19649776
Ok, I think I got it working... if any one else has any ideas, let me know... I will accept a solution tonight :)

Thanks for your help

<STYLE>
      table {
            border-collapse: collapse;
            margin: 0px 0px 0px 0px;
            padding: 0px;
            border: 0px;
            text-align: left;
            vertical-align: top;
      }
</STYLE>
<TABLE>
      <TR>
            <TD>
                  Title1
            </TD>
            <TD>
                  Title2
            </TD>
            <TD>
                  Title3
            </TD>
            <TD>
                  Title4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';" onClick="document.getElementById('SomeName').checked = !(document.getElementById('SomeName').checked);">
            <TD>
                  <INPUT TYPE="CheckBox" ID="SomeName" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';" onClick="document.getElementById('SomeOtherName').checked = !(document.getElementById('SomeOtherName').checked);">
            <TD>
                  <INPUT TYPE="CheckBox" ID="SomeOtherName" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';" onClick="document.getElementById('SomeName1').checked = !(document.getElementById('SomeName1').checked);">
            <TD>
                  <INPUT TYPE="CheckBox" ID="SomeName1" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';" onClick="document.getElementById('SomeNameD').checked = !(document.getElementById('SomeNameD').checked);">
            <TD>
                  <INPUT TYPE="CheckBox" ID="SomeNameD" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';" onClick="document.getElementById('SomeNameSD').checked = !(document.getElementById('SomeNameSD').checked);">
            <TD>
                  <INPUT TYPE="CheckBox" ID="SomeNameSD" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      <TR onmouseover="this.style.backgroundColor='#99CCFF';" onmouseout="this.style.backgroundColor='#FFFFFF';" onClick="document.getElementById('SomeNameB').checked = !(document.getElementById('SomeNameB').checked);">
            <TD>
                  <INPUT TYPE="CheckBox" ID="SomeNameB" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
</TABLE>
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 19649801
Problem.... if you click on the check box, it does not work.... it must be checking itself, then the onClick unChecks it.... any solutions?
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19649824
Why are you checking a table row??  It doesn't have a checked property.

I stepped out of the building a bit and am now confused.  Please clarify what is working and what you still need help on.  Where did the checkbox come from?

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19649843
OK.  I overlooked the checkbox part of your question.  Try this ...

onclick="this.document.getElementsByTagName('input')[0].checked = (this.document.getElementsByTagName('input')[0].checked)? 'false' : 'true';"

Use that in the table row tag instead of your current onclick if that isn't working.

Let me know if there is still a problem with something or if you have a question.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19649854
By the way, that code assumes the table row only contains one input tag, the checkbox input.  If there is more than one then there may be a problem so let me know.

bol
0
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 400 total points
ID: 19649909
Sorry, I had a typo in my onclick suggestion.  They may not cause a problem but you shouldn't need the single quotes.

onclick="this.document.getElementsByTagName('input')[0].checked = (this.document.getElementsByTagName('input')[0].checked)? false : true;"

bol
0
 
LVL 17

Accepted Solution

by:
mreuring earned 1600 total points
ID: 19650823
@b0lsc0tt I'm sorry that I have to contradict you but, :hover works on all elements by CSS2 spec and all current browsers support this and have been for a few years. IE6 and it's predecessors being the only ones not too. Mozilla has always supported it (at least since 0.8 orso) and thus FF will happily :hover anything, same goes for Safari (since 1.0) and Opera has been supporting at least since 8.

To fix IE5 and IE6 you can use a cool solution by pnederlof: http://www.xs4all.nl/~peterned/csshover.html
It's been well-tested and accepted and published in some good books (among others Eric Meyer used it in a book of his).

As for that onclick, it works as it is, but I would propose a somewhat different approach by adding it to the table instead of every row. By it's verry nature the script gets a little more complex, but I also added some support for using links and other types of inputs in the table without triggering the checkbox:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<STYLE>
      body {
            behavior:url("./csshover.htc");
      }

        table {
            border-collapse: collapse;
            margin: 0px 0px 0px 0px;
            padding: 0px;
            border: 0px;
            text-align: left;
            vertical-align: top;
      }
     
      tbody tr:hover td {
            background: #EEF;
      }
</STYLE>
<script type="text/javascript">
      function clickTable(e) {
            var e = e||event;
            var target = e.target||e.srcElement;
            if (target.nodeType != 1) target = target.parentNode; //In case of a textnode
            var skipRE = /^(a)|(input)$/i;
            var trRE = /^tr$/i;
            if (!skipRE.test(target.nodeName)) {
                  while (target.parentNode && !trRE.test(target.nodeName)) target = target.parentNode;
                  if (trRE.test(target.nodeName)) {
                        var chkRE = /^checkbox$/i;
                        var inpts = target.getElementsByTagName("input");
                        if (inpts.length == 0) return;
                        var i = 0;
                        while (i < inpts.length && !chkRE.test(inpts[i].type)) i++;
                        var chkBx = inpts[i];
                        chkBx.checked = !chkBx.checked;
                  }
            }
      }
</script>
</head>
<body>
<TABLE onclick="return clickTable(event);">
      <THEAD>
      <TR>
            <TD>
                  Title1
            </TD>
            <TD>
                  Title2
            </TD>
            <TD>
                  Title3
            </TD>
            <TD>
                  Title4
            </TD>
      </TR>
      </THEAD>
      <TBODY>
      <TR>
            <TD>
                  <INPUT TYPE="CheckBox" ID="SomeName" />
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
.
.
.
.
             </TD>
            <TD>
                  data 4
            </TD>
      </TR>
      </TBODY>
</TABLE>
      
</body>
</html>

I also introduced the use of THEAD and TBODY as this seperates the header and content better, making it more comfortable to target your css selectors with a bit more accuracy.

Just an alternative take on the whole thing...

 Martin
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19655298
I'm glad I could help.  Thanks for the grade, the points and the fun question.


@mreuring -
>> I'm sorry that I have to contradict you but, :hover works on all elements by CSS2 spec <<

Thanks for the correction.  I will have to play with it some to verify it but I probably confused hover support in browsers with something else.  I'm glad you pointed it out and posted. :)

bol
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 19656663
I am not sure what happened, but I think I was using FireFox to test the code... because I just loaded into our JSP, and tried to run IE.... and it is not working... Any help? Did the code work for other people using IE?
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19656805
Which version of IE?  Was it the hover code or which?

I haven't had a chance to confirm this myself but Mreuring said in his comment at http:#19650823 that IE6 and earlier versions of IE did not support :hover.  At least that is how I read it but he could confirm.  If you need full support for IE then you could try using my alternative suggestion that doesn't use hover.

bol
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 19657379
b0lsc0tt: -> I am going to open a new question... and I want you to post your solution again, and I will accept it.. .because I am going to end up using your solution .

question is posted here....

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_22750456.html
0
 
LVL 17

Expert Comment

by:mreuring
ID: 19657530
Sorry, different timezone:
If you're using my solutions notice this part of the css:
body {
            behavior:url("./csshover.htc");
      }

It requires the csshover.htc file to be in the same directory as the html file is, for this particular css. Read more on the link I provided to this solution: http://www.xs4all.nl/~peterned/csshover.html

You can off course place the htc file where-ever you want as long as you then modify the css snippet I just pointed out.

Hope this helps.

P.S. I did test my solution on IE6 and 7, Opera 9, Safari 2 and FF2 and 1.5. That doesn't mean I'm beyond reproach off course, but it's just to indicate that I did mean this to work for you, out of the box.
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 19657599
It is ok, I added the file "csshover.htc" ... but it was still not working... both features where not working....

The JS and the CSS stuff did not work... I double checked the source in the JSP (View Source) and it all was correct... I then went back to the example, and ran the code in IE.... it did not work (Note: it is hard to test normal JS in this environment, all JS is disabled UNLESS coming from a server.. IE: Apache)

Also note: there are many tables / divs in this app...
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19657712
I made the post but I am not sure I feel comfortable with doing it.  I don't want to seem like I am getting double points.  If Mreuring's last comment solves the issue with IE6 then I don't object to you ending the new question and we can have a moderator delete it.  If there is still a problem with this then we can reopen this question or just use the new one as a follow up (which I guess it is technically).  I just want to make sure that you don't feel you have to open a second to get your original question working or that Mreuring feels I am getting double points and even over the max for one problem. :)

Let me know if there are any objections or what you want to do.  I'll be glad to help either way.

bol
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 19657752
I like "mreuring" solution... I just can't get it to work... Your solution works....
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19657855
According to his profile it looks like he is in New Zealand so you can give him some time to reply to your last response.  Let me know if you want info on having this reopened so you can keep on working on this.  Basically you just need to post a message in General Community Support to ask a moderator to do it but I can provide details if you need.

I will keep an eye on this but right now I just don't have time to look into the solution he suggested to try to help troubleshoot it. :)  I do agree that it looks good though and it seems to have worked in his tests.

bol

p.s.  Did you try it with the exact html he provided in http:#19650823 (including the csshover.htc file in the same directory as the html file)?  If not then you might want to post the html you used and any details like location of the csshover file and error messages.  Did it work in any browser?  etc. :)
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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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)
Suggested Courses

862 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