Table On Hover highlighting and checkboxes

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>
LVL 1
JoshWegenerAsked:
Who is Participating?
 
mreuringConnect With a Mentor Commented:
@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
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
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
 
b0lsc0ttIT ManagerCommented:
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
JoshWegenerAuthor Commented:
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
 
JoshWegenerAuthor Commented:
I tryed

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

but that does not seem to work...
0
 
JoshWegenerAuthor Commented:
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
 
JoshWegenerAuthor Commented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
JoshWegenerAuthor Commented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
JoshWegenerAuthor Commented:
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
 
mreuringCommented:
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
 
JoshWegenerAuthor Commented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
JoshWegenerAuthor Commented:
I like "mreuring" solution... I just can't get it to work... Your solution works....
0
 
b0lsc0ttIT ManagerCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.