i'm stuck following challenge:
- my table has basic (static) alternating color scheme even/odd rows, containing different options (class).
- in addition javascript should provide for:
- a rollover effect show row pointed @ cursor (onmouseover, onmouseout)
- a specific color row contains option selected mouse click (onclick).
i came following code:
<html> <head> <style type="text/css"> tr.modulerow-odd { background-color : #ff0000; } tr.modulerow-even { background-color : #00ff00; } .modulerowover-odd, .modulerowover-even { background-color : #d7e9f7; } .modulerowselected-even, .modulerowselected-odd { background-color : #0000ff; } </style> <script type="text/javascript"><!-- var selected; function selectroweffect(object, buttonselect) { if (!selected) { if (document.getelementbyid) { selected = document.getelementbyid('defaultselected'); } else { selected = document.all['defaultselected']; } } if (selected) { if (selected.classname == 'modulerow-even' || selected.classname == 'modulerowselected-even') { selected.classname = 'modulerow-even'; object.classname = 'modulerowselected-even'; } if (selected.classname == 'modulerow-odd' || selected.classname == 'modulerowselected-odd') { selected.classname = 'modulerow-odd'; object.classname = 'modulerowselected-odd'; } } //selected.classname = 'modulerow'; //object.classname = 'modulerowselected'; selected = object; // 1 button not array if (document.checkout_payment.payment[0]) { document.checkout_payment.payment[buttonselect].checked=true; } else { document.checkout_payment.payment.checked=true; } } function rowovereffect_1(object) { if (object.classname == 'modulerow-odd') object.classname = 'modulerowover-odd'; } function rowovereffect_2(object) { if (object.classname == 'modulerow-even') object.classname = 'modulerowover-even'; } function rowouteffect_1(object) { if (object.classname == 'modulerowover-odd') object.classname = 'modulerow-odd'; } function rowouteffect_2(object) { if (object.classname == 'modulerowover-even') object.classname = 'modulerow-even'; } //--></script> </head> <body> <table> <tr class="modulerow-odd" onmouseover="rowovereffect_1(this)" onmouseout="rowouteffect_1(this)" onclick="selectroweffect(this, 0)"> <td>option 1 - row-odd</td> <td><input type="radio" name="payment" value="option 1" /></td> </tr> <tr class="modulerow-even" onmouseover="rowovereffect_2(this)" onmouseout="rowouteffect_2(this)" onclick="selectroweffect(this, 1)"> <td>option 2 - row-even</td> <td><input type="radio" name="payment" value="option 2" /></td> </tr> </table> </body> </html> when testing, after clicking few times on options, loose alternating static background (odd/even rows same color) , part of rollover.
any appreciated.
kind regards,
dennis
i modified selectroweffect function in order fix logic problem
as can see, need check if selected row or not , revert class should (unselect it).
and then, can change clicked row's class corresponding selected one. note used ? : ternary operator tests condition before ? , if true returns part between ? , : otherwise returns part after :. returned value affected object's classname.
here fiddle see in action.
function selectroweffect(object, buttonselect) { if (!selected) { if (document.getelementbyid) { selected = document.getelementbyid('defaultselected'); } else { selected = document.all['defaultselected']; } } if (selected) { if (selected.classname == 'modulerowselected-even') { selected.classname = 'modulerow-even'; } if (selected.classname == 'modulerowselected-odd') { selected.classname = 'modulerow-odd'; } } object.classname = buttonselect == 1 ? "modulerowselected-even" : "modulerowselected-odd"; selected = object; // 1 button not array if (document.checkout_payment.payment[0]) { document.checkout_payment.payment[buttonselect].checked=true; } else { document.checkout_payment.payment.checked=true; } } 
Comments
Post a Comment