Table On Hover highlighting and checkboxes

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

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??

I tryed

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

but that does not seem to work...

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>

Problem.... if you click on the check box, it does not work.... it must be checking itself, then the onClick unChecks it.... any solutions?

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

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

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

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

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?

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

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....

https://www.experts-exchange.com/questions/22750456/Table-On-Click-Hover-highlighting-and-checkboxes.html

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.

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...

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

I like "mreuring" solution... I just can't get it to work... Your solution works....

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. :)