asked on

Table On Click / 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" ID="SomeName" />
</TD>
<TD>
data 2
</TD>
<TD>
data 3
</TD>
<TD>
data 4
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="CheckBox" ID="SomeOtherName" />
</TD>
<TD>
data 2
</TD>
<TD>
data 3
</TD>
<TD>
data 4
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="CheckBox" ID="SomeName1" />
</TD>
<TD>
data 2
</TD>
<TD>
data 3
</TD>
<TD>
data 4
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="CheckBox" ID="SomeNameD" />
</TD>
<TD>
data 2
</TD>
<TD>
data 3
</TD>
<TD>
data 4
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="CheckBox" ID="SomeNameSD" />
</TD>
<TD>
data 2
</TD>
<TD>
data 3
</TD>
<TD>
data 4
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="CheckBox" ID="SomeNameB" />
</TD>
<TD>
data 2
</TD>
<TD>
data 3
</TD>
<TD>
data 4
</TD>
</TR>
</TABLE>

ASKER CERTIFIED SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JoshWegener

ASKER

When I first tried to use that, it does not seem to work... so I tryed this, and it is working fine...'

(Sort of a hack)

<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" onClick="this.checked = !this.checked;"/>
            </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" onClick="this.checked = !this.checked;"/>
            </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" onClick="this.checked = !this.checked;"/>
            </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" onClick="this.checked = !this.checked;"/>
            </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" onClick="this.checked = !this.checked;"/>
            </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" onClick="this.checked = !this.checked;"/>
            </TD>
            <TD>
                  data 2
            </TD>
            <TD>
                  data 3
            </TD>
            <TD>
                  data 4
            </TD>
      </TR>
</TABLE>

b0lsc0tt

So this is working completely now? Do you need any other help with this?

Did you try clicking on the checkbox and does is still behave OK? Since it is part of the table row there is the possibility the onclick in each element will be used. That result might even be browser dependent but let me know if there is an issue.

Let me know the status of this or what other help you need with this.

bol

JoshWegener

ASKER

I think that is it.... This solution is being accept as a IE "hack" only....

Thanks for your help!

b0lsc0tt

Your welcome! I'm glad I could help. Thanks for the grade, the points and the fun question. :)

bol