I am trying to improve a nasty user interface for a survey program. There is a big table with a list of items, each of which user will rank in order from 1 to 20. Problem is that there are almost 90 items in the list and the data scrolls off the screen and it's very hard to keep track of which ranks you've already assigned.
To help the user keep track, I would like to change the background color of a COLUMN when you select a radio button in that column. All the radio buttons in a given column have the same name. I can't think of any elegant way to do this (I'm not a HTML specialist) and thought maybe you might have some feedback or ideas about this.
In other words, what I would like to do is when a radio button is selected, I want to change the background color of all table cells which contain a radio button with the same name as the one you selected.
Condensed version of HTML is below, thanks!
HTML Code:
================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>2005 Resort Survey</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>
.center
{
text-align: center;
}
.center_table
{
margin-left: auto;
margin-right: auto;
text-align: left;
border: thin solid gray;
}
.head {
font-size: 13pt;
color: white;
font-weight: bolder;
background: #003366;
}
.subhead {
font-size: 11pt;
font-weight: bolder;
}
.left {
text-align: right;
background-color: #eeeeee;
font-size: 9pt;
}
.right {
text-align: left;
font-size: 9pt;
}
.odd {
background-color: #ffffff;
font-size: 8pt;
}
.even {
background-color: #eeeeee;
font-size: 8pt;
}
BODY {
MARGIN: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #ffffff
}
</STYLE>
</HEAD>
<BODY><!-- centering table for IE -->
<TABLE id=centering cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=centerCell>
<DIV id=centering><!-- main body table, includes header-->
<TABLE cellSpacing=1 cellPadding=0 width=728 border=0>
<TBODY>
<TR>
<TD style="BACKGROUND-COLOR: #c2dae2" width=100%>
<!-- content goes in this cell -->
<br />
<p>
<form name="overallform" action="/athletes/index.cgi" method="post">
<input type="hidden" name="action" value="overallsave">
<input type="hidden" name="cid" value="4">
<table>
<tr>
<td class="head" colspan="2">Overall Ranking - 1 through 20 - 1 is best</td>
</tr>
<tr>
<td colspan="2">In your opinion, using whatever criteria are important to you, please choose your favorite twenty resorts. You will have the chance to make different choices in specific categories next, but for the Overall category we want to know your overall favorites.</td>
</tr>
<tr>
<td colspan="2"><table width="100%">
<tr>
<td colspan="21" class="head">All resorts</td>
</tr>
<tr>
<td class="subhead">Resort (1 is best)</td>
<td class="subhead" align="center">1</td>
<td class="subhead" align="center">2</td>
<td class="subhead" align="center">3</td>
<td class="subhead" align="center">4</td>
<td class="subhead" align="center">5</td>
<td class="subhead" align="center">6</td>
<td class="subhead" align="center">7</td>
<td class="subhead" align="center">8</td>
<td class="subhead" align="center">9</td>
<td class="subhead" align="center">10</td>
<td class="subhead" align="center">11</td>
<td class="subhead" align="center">12</td>
<td class="subhead" align="center">13</td>
<td class="subhead" align="center">14</td>
<td class="subhead" align="center">15</td>
<td class="subhead" align="center">16</td>
<td class="subhead" align="center">17</td>
<td class="subhead" align="center">18</td>
<td class="subhead" align="center">19</td>
<td class="subhead" align="center">20</td>
</tr>
<tr>
<td class="odd">Alpental</td>
<td class="odd"><input type="radio" name="01" value="86"></td>
<td class="odd"><input type="radio" name="02" value="86"></td>
<td class="odd"><input type="radio" name="03" value="86"></td>
<td class="odd"><input type="radio" name="04" value="86"></td>
<td class="odd"><input type="radio" name="05" value="86"></td>
<td class="odd"><input type="radio" name="06" value="86"></td>
<td class="odd"><input type="radio" name="07" value="86"></td>
<td class="odd"><input type="radio" name="08" value="86"></td>
<td class="odd"><input type="radio" name="09" value="86"></td>
<td class="odd"><input type="radio" name="10" value="86"></td>
<td class="odd"><input type="radio" name="11" value="86"></td>
<td class="odd"><input type="radio" name="12" value="86"></td>
<td class="odd"><input type="radio" name="13" value="86"></td>
<td class="odd"><input type="radio" name="14" value="86"></td>
<td class="odd"><input type="radio" name="15" value="86"></td>
<td class="odd"><input type="radio" name="16" value="86"></td>
<td class="odd"><input type="radio" name="17" value="86"></td>
<td class="odd"><input type="radio" name="18" value="86"></td>
<td class="odd"><input type="radio" name="19" value="86"></td>
<td class="odd"><input type="radio" name="20" value="86"></td>
</tr>
<tr>
<td class="even">Alpine Meadows</td>
<td class="even"><input type="radio" name="01" value="1"></td>
<td class="even"><input type="radio" name="02" value="1"></td>
<td class="even"><input type="radio" name="03" value="1"></td>
<td class="even"><input type="radio" name="04" value="1"></td>
<td class="even"><input type="radio" name="05" value="1"></td>
<td class="even"><input type="radio" name="06" value="1"></td>
<td class="even"><input type="radio" name="07" value="1"></td>
<td class="even"><input type="radio" name="08" value="1"></td>
<td class="even"><input type="radio" name="09" value="1"></td>
<td class="even"><input type="radio" name="10" value="1"></td>
<td class="even"><input type="radio" name="11" value="1"></td>
<td class="even"><input type="radio" name="12" value="1"></td>
<td class="even"><input type="radio" name="13" value="1"></td>
<td class="even"><input type="radio" name="14" value="1"></td>
<td class="even"><input type="radio" name="15" value="1"></td>
<td class="even"><input type="radio" name="16" value="1"></td>
<td class="even"><input type="radio" name="17" value="1"></td>
<td class="even"><input type="radio" name="18" value="1"></td>
<td class="even"><input type="radio" name="19" value="1"></td>
<td class="even"><input type="radio" name="20" value="1"></td>
</tr>
<tr>
<td class="odd">Alta/Snowbird</td>
<td class="odd"><input type="radio" name="01" value="3"></td>
<td class="odd"><input type="radio" name="02" value="3"></td>
<td class="odd"><input type="radio" name="03" value="3"></td>
<td class="odd"><input type="radio" name="04" value="3"></td>
<td class="odd"><input type="radio" name="05" value="3"></td>
<td class="odd"><input type="radio" name="06" value="3"></td>
<td class="odd"><input type="radio" name="07" value="3"></td>
<td class="odd"><input type="radio" name="08" value="3"></td>
<td class="odd"><input type="radio" name="09" value="3"></td>
<td class="odd"><input type="radio" name="10" value="3"></td>
<td class="odd"><input type="radio" name="11" value="3"></td>
<td class="odd"><input type="radio" name="12" value="3"></td>
<td class="odd"><input type="radio" name="13" value="3"></td>
<td class="odd"><input type="radio" name="14" value="3"></td>
<td class="odd"><input type="radio" name="15" value="3"></td>
<td class="odd"><input type="radio" name="16" value="3"></td>
<td class="odd"><input type="radio" name="17" value="3"></td>
<td class="odd"><input type="radio" name="18" value="3"></td>
<td class="odd"><input type="radio" name="19" value="3"></td>
<td class="odd"><input type="radio" name="20" value="3"></td>
</tr>
<tr>
<td class="even">Alyeska Resort</td>
<td class="even"><input type="radio" name="01" value="4"></td>
<td class="even"><input type="radio" name="02" value="4"></td>
<td class="even"><input type="radio" name="03" value="4"></td>
<td class="even"><input type="radio" name="04" value="4"></td>
<td class="even"><input type="radio" name="05" value="4"></td>
<td class="even"><input type="radio" name="06" value="4"></td>
<td class="even"><input type="radio" name="07" value="4"></td>
<td class="even"><input type="radio" name="08" value="4"></td>
<td class="even"><input type="radio" name="09" value="4"></td>
<td class="even"><input type="radio" name="10" value="4"></td>
<td class="even"><input type="radio" name="11" value="4"></td>
<td class="even"><input type="radio" name="12" value="4"></td>
<td class="even"><input type="radio" name="13" value="4"></td>
<td class="even"><input type="radio" name="14" value="4"></td>
<td class="even"><input type="radio" name="15" value="4"></td>
<td class="even"><input type="radio" name="16" value="4"></td>
<td class="even"><input type="radio" name="17" value="4"></td>
<td class="even"><input type="radio" name="18" value="4"></td>
<td class="even"><input type="radio" name="19" value="4"></td>
<td class="even"><input type="radio" name="20" value="4"></td>
</tr>
<tr>
<td class="odd">Arapahoe Basin</td>
<td class="odd"><input type="radio" name="01" value="5"></td>
<td class="odd"><input type="radio" name="02" value="5"></td>
<td class="odd"><input type="radio" name="03" value="5"></td>
<td class="odd"><input type="radio" name="04" value="5"></td>
<td class="odd"><input type="radio" name="05" value="5"></td>
<td class="odd"><input type="radio" name="06" value="5"></td>
<td class="odd"><input type="radio" name="07" value="5"></td>
<td class="odd"><input type="radio" name="08" value="5"></td>
<td class="odd"><input type="radio" name="09" value="5"></td>
<td class="odd"><input type="radio" name="10" value="5"></td>
<td class="odd"><input type="radio" name="11" value="5"></td>
<td class="odd"><input type="radio" name="12" value="5"></td>
<td class="odd"><input type="radio" name="13" value="5"></td>
<td class="odd"><input type="radio" name="14" value="5"></td>
<td class="odd"><input type="radio" name="15" value="5"></td>
<td class="odd"><input type="radio" name="16" value="5"></td>
<td class="odd"><input type="radio" name="17" value="5"></td>
<td class="odd"><input type="radio" name="18" value="5"></td>
<td class="odd"><input type="radio" name="19" value="5"></td>
<td class="odd"><input type="radio" name="20" value="5"></td>
</tr>
<tr>
<td class="even">Aspen/Aspen Highlands</td>
<td class="even"><input type="radio" name="01" value="6"></td>
<td class="even"><input type="radio" name="02" value="6"></td>
<td class="even"><input type="radio" name="03" value="6"></td>
<td class="even"><input type="radio" name="04" value="6"></td>
<td class="even"><input type="radio" name="05" value="6"></td>
<td class="even"><input type="radio" name="06" value="6"></td>
<td class="even"><input type="radio" name="07" value="6"></td>
<td class="even"><input type="radio" name="08" value="6"></td>
<td class="even"><input type="radio" name="09" value="6"></td>
<td class="even"><input type="radio" name="10" value="6"></td>
<td class="even"><input type="radio" name="11" value="6"></td>
<td class="even"><input type="radio" name="12" value="6"></td>
<td class="even"><input type="radio" name="13" value="6"></td>
<td class="even"><input type="radio" name="14" value="6"></td>
<td class="even"><input type="radio" name="15" value="6"></td>
<td class="even"><input type="radio" name="16" value="6"></td>
<td class="even"><input type="radio" name="17" value="6"></td>
<td class="even"><input type="radio" name="18" value="6"></td>
<td class="even"><input type="radio" name="19" value="6"></td>
<td class="even"><input type="radio" name="20" value="6"></td>
</tr>
<tr>
<td class="odd">Attitash Bear Peak</td>
<td class="odd"><input type="radio" name="01" value="8"></td>
<td class="odd"><input type="radio" name="02" value="8"></td>
<td class="odd"><input type="radio" name="03" value="8"></td>
<td class="odd"><input type="radio" name="04" value="8"></td>
<td class="odd"><input type="radio" name="05" value="8"></td>
<td class="odd"><input type="radio" name="06" value="8"></td>
<td class="odd"><input type="radio" name="07" value="8"></td>
<td class="odd"><input type="radio" name="08" value="8"></td>
<td class="odd"><input type="radio" name="09" value="8"></td>
<td class="odd"><input type="radio" name="10" value="8"></td>
<td class="odd"><input type="radio" name="11" value="8"></td>
<td class="odd"><input type="radio" name="12" value="8"></td>
<td class="odd"><input type="radio" name="13" value="8"></td>
<td class="odd"><input type="radio" name="14" value="8"></td>
<td class="odd"><input type="radio" name="15" value="8"></td>
<td class="odd"><input type="radio" name="16" value="8"></td>
<td class="odd"><input type="radio" name="17" value="8"></td>
<td class="odd"><input type="radio" name="18" value="8"></td>
<td class="odd"><input type="radio" name="19" value="8"></td>
<td class="odd"><input type="radio" name="20" value="8"></td>
</tr>
<tr>
<td class="even">Bear Valley</td>
<td class="even"><input type="radio" name="01" value="9"></td>
<td class="even"><input type="radio" name="02" value="9"></td>
<td class="even"><input type="radio" name="03" value="9"></td>
<td class="even"><input type="radio" name="04" value="9"></td>
<td class="even"><input type="radio" name="05" value="9"></td>
<td class="even"><input type="radio" name="06" value="9"></td>
<td class="even"><input type="radio" name="07" value="9"></td>
<td class="even"><input type="radio" name="08" value="9"></td>
<td class="even"><input type="radio" name="09" value="9"></td>
<td class="even"><input type="radio" name="10" value="9"></td>
<td class="even"><input type="radio" name="11" value="9"></td>
<td class="even"><input type="radio" name="12" value="9"></td>
<td class="even"><input type="radio" name="13" value="9"></td>
<td class="even"><input type="radio" name="14" value="9"></td>
<td class="even"><input type="radio" name="15" value="9"></td>
<td class="even"><input type="radio" name="16" value="9"></td>
<td class="even"><input type="radio" name="17" value="9"></td>
<td class="even"><input type="radio" name="18" value="9"></td>
<td class="even"><input type="radio" name="19" value="9"></td>
<td class="even"><input type="radio" name="20" value="9"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="subhead" colspan="2"><input type="submit" value="continue > > > " /></td>
</tr>
</table>
</form>
</p>
</TD>
</TR>
<!-- end lead article -->
</TD>
</TR>
</TBODY>
</TABLE>
</BODY></HTML>
Last edited by 0beron; 04-06-2005 at 11:34 AM..
Reason: Added [html ] tags
|
