<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en">
<Head>
<Title> table stripes and row locking </title>
<Style type = "text/CSS">
Body {Background: # FFF ;}
H1 {Font: bold 20px/26px Arial ;}
P, Li, TD {Font: normal 12px/17px Arial ;}
Table {border: 0; border-collapse: collapse ;}
TD {padding: 4px ;}
Th {Font: bold 12px/17px Arial; text-align: Left; padding: 4px; border-bottom: 1px solid #333 ;}
Tr. Odd {Background: # e4dcd9 ;}
Tr. Highlight {Background: # bda9a2 ;}
Tr. Selected {Background: #4a1200; color: # FFF ;}
TD + TD {text-align: Right ;}
</Style>
<SCRIPT type = "text/JavaScript">
Function addloadevent (func ){
VaR oldonload = Window. onload;
If (typeof window. onload! = 'Function '){
Window. onload = func;
} Else {
Window. onload = function (){
Oldonload ();
Func ();
}
}
}
Function addclass (element, value ){
If (! Element. classname ){
Element. classname = value;
} Else {
Newclassname = element. classname;
Newclassname + = "";
Newclassname + = value;
Element. classname = newclassname;
}
}
Function stripetables (){
VaR tables = Document. getelementsbytagname ("table ");
For (VAR m = 0; m <tables. length; m ++ ){
If (tables [M]. classname = "pickme "){
VaR tbodies = tables [M]. getelementsbytagname ("tbody ");
For (VAR I = 0; I <tbodies. length; I ++ ){
VaR odd = true;
VaR rows = tbodies [I]. getelementsbytagname ("TR ");
For (var j = 0; j <rows. length; j ++ ){
If (odd = false ){
Odd = true;
} Else {
Addclass (rows [J], "odd ");
Odd = false;
}
}
}
}
}
}
Function highlightrows (){
If (! Document. getelementsbytagname) return false;
VaR tables = Document. getelementsbytagname ("table ");
For (VAR m = 0; m <tables. length; m ++ ){
If (tables [M]. classname = "pickme "){
VaR tbodies = tables [M]. getelementsbytagname ("tbody ");
For (var j = 0; j <tbodies. length; j ++ ){
VaR rows = tbodies [J]. getelementsbytagname ("TR ");
For (VAR I = 0; I <rows. length; I ++ ){
Rows [I]. oldclassname = rows [I]. classname
Rows [I]. onmouseover = function (){
If (this. classname. indexof ("selected") =-1)
Addclass (this, "highlight ");
}
Rows [I]. onmouseout = function (){
If (this. classname. indexof ("selected") =-1)
This. classname = This. oldclassname
}
}
}
}
}
}
Function selectrowcheckbox (ROW ){
VaR checkbox = row. getelementsbytagname ("input") [0];
If (checkbox. Checked = true ){
Checkbox. Checked = false;
} Else
If (checkbox. Checked = false ){
Checkbox. Checked = true;
}
}
Function lockrow (){
VaR tables = Document. getelementsbytagname ("table ");
For (VAR m = 0; m <tables. length; m ++ ){
If (tables [M]. classname = "pickme "){
VaR tbodies = tables [M]. getelementsbytagname ("tbody ");
For (var j = 0; j <tbodies. length; j ++ ){
VaR rows = tbodies [J]. getelementsbytagname ("TR ");
For (VAR I = 0; I <rows. length; I ++ ){
Rows [I]. oldclassname = rows [I]. classname;
Rows [I]. onclick = function (){
If (this. classname. indexof ("selected ")! =-1 ){
This. classname = This. oldclassname;
} Else {
Addclass (this, "selected ");
}
Selectrowcheckbox (this );
}
}
}
}
}
}
Addloadevent (stripetables );
Addloadevent (highlightrows );
Addloadevent (lockrow );
Function lockrowusingcheckbox (){
VaR tables = Document. getelementsbytagname ("table ");
For (VAR m = 0; m <tables. length; m ++ ){
If (tables [M]. classname = "pickme "){
VaR tbodies = tables [M]. getelementsbytagname ("tbody ");
For (var j = 0; j <tbodies. length; j ++ ){
VaR checkboxes = tbodies [J]. getelementsbytagname ("input ");
For (VAR I = 0; I <checkboxes. length; I ++ ){
Checkboxes [I]. onclick = function (EVT ){
If (this. parentnode. parentnode. classname. indexof ("selected ")! =-1 ){
This. parentnode. parentnode. classname = This. parentnode. parentnode. oldclassname;
} Else {
Addclass (this. parentnode. parentnode, "selected ");
}
If (window. Event &&! Window. event. cancelbubble ){
Window. event. cancelbubble = "true ";
} Else {
EVT. stoppropagation ();
}
}
}
}
}
}
}
Addloadevent (lockrowusingcheckbox );
</SCRIPT>
</Head>
<Body>
<H1> Table 2
<Table
Id = "striped2"
Class = "pickme"
Caption = "top grossing movies">
<Thead>
<Tr>
<TH> </Th>
<TH> Category </Th>
<TH> movie </Th>
<TH> gross </Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<TD>
<Input
Type = "checkbox"
Name = "tablechoice1"
Value = "walalala"/>
</TD>
<TD> domestic </TD>
<TD> Titanic </TD>
<TD> $600,788,188 </TD>
</Tr>
<Tr>
<TD>
<Input
Type = "checkbox"
Name = "tablechoice2"
Value = "walalala"/>
</TD>
<TD> adjusted for inflation </TD>
<TD> Gone With the Wind </TD>
<TD> $1,329,453,600 </TD>
</Tr>
<Tr>
<TD>
<Input
Type = "checkbox"
Name = "tablechoice3"
Value = "walalala"/>
</TD>
<TD> worldwide </TD>
<TD> Titanic </TD>
<TD> $1,845,034,000 </TD>
</Tr>
<Tr>
<TD>
<Input
Type = "checkbox"
Name = "tablechoice4"
Value = "walalala"/>
</TD>
<TD> r-rating </TD>
<TD> The Passion of the Christ </TD>
<TD> $370,274,604 </TD>
</Tr>
<Tr>
<TD>
<Input
Type = "checkbox"
Name = "tablechoice5"
Value = "walalala"/>
</TD>
<TD> PG-13 rating </TD>
<TD> Titanic </TD>
<TD> $600,788,188 </TD>
</Tr>
<Tr>
<TD>
<Input
Type = "checkbox"
Name = "tablechoice6"
Value = "walalala"/>
</TD>
<TD> PG-rating </TD>
<TD> Star Wars </TD>
<TD> $460,998,007 </TD>
</Tr>
<Tr>
<TD>
<Input
Type = "checkbox"
Name = "tablechoice7"
Value = "walalala"/>
</TD>
<TD> G-rating </TD>
<TD> Finding Nemo </TD>
<TD> $339,714,978 </TD>
</Tr>
<Tr>
<TD>
<Input
Type = "checkbox"
Name = "tablechoice8"
Value = "walalala"/>
</TD>
<TD> NC-17 rating </TD>
<TD> showgirls </TD>
<TD> $20,350,754 </TD>
</Tr>
<Tr>
<TD>
<Input
Type = "checkbox"
Name = "tablechoice9"
Value = "walalala"/>
</TD>
<TD> movies that never hit #1 </TD>
<TD> My Big Fat Greek Wedding </TD>
<TD> 241,438,208 </TD>
</Tr>
<Tr>
<TD>
<Input
Type = "checkbox"
Name = "tablechoice10"
Value = "walalala"/>
</TD>
<TD> IMAX </TD>
<TD> Everest </TD>
<TD> $87,178,599 </TD>
</Tr>
</Tbody> </table>
</Body>
</Html>