lindm Posted July 19, 2008 Share Posted July 19, 2008 Have a small anomaly which is driving me crazy. The page is pretty much self-explaining...simply load in a browser or check: http://www.drlindmark.se/kevin/script.html <head> <style type="text/css" media="screen,print"> .checked {background-color: #F1F1F1;} </style> <script type="text/javascript"> function pl(name) { if (name.checked == true) {name.parentNode.parentNode.className = "checked";} else {name.parentNode.parentNode.className = "xxx";} } function plt(name) { if (name.checked == true) {name.parentNode.parentNode.parentNode.className = "checked";} else {name.parentNode.parentNode.parentNode.className = "xxx";} } </script> </head> <body> <form name="form1" method="post" action=""> <table border="1" cellspacing="0" cellpadding="0" class=""> <tr> <td width="355">Tableclass 1 - not checked and no class. Works fine.</td> <td width="120"> </td> <td width="120"> </td> <td width="25"> <input type="checkbox" name="checkbox" id="checkbox" onclick="plt(this)"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <br> <table border="1" cellspacing="0" cellpadding="0" class="checked"> <tr> <td width="355">Tableclass 2 - checked and class set.</td> <td width="120"> </td> <td width="120"> </td> <td width="25"> <input name="checkbox" type="checkbox" id="checkbox" onclick="plt(this)" checked> </td> </tr> <tr> <td><strong>PROBLEM!</strong> Why does not the background change??</td> <td> </td> <td> </td> <td> </td> </tr> </table> <br> <table border="1" cellspacing="0" cellpadding="0"> <tr class=""> <td width="355">Rowclass 1 - not checked and no class. Works fine.</td> <td width="120"> </td> <td width="120"> </td> <td width="25"> <input type="checkbox" name="checkbox2" id="checkbox2" onclick="pl(this)"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <br> <table border="1" cellspacing="0" cellpadding="0"> <tr class="checked"> <td width="355">Row class 2 - checked and class set. Works fine.</td> <td width="120"> </td> <td width="120"> </td> <td width="25"> <input name="checkbox2" type="checkbox" id="checkbox2" onclick="pl(this)" checked> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <br> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
Psycho Posted July 19, 2008 Share Posted July 19, 2008 Why make it so difficult using parent.parent... Simply give an ID to each element and pass it in the function. Then you only need one function and it becomes much simpler. <html> <head> <style type="text/css" media="screen,print"> .checked {background-color: #F1F1F1;} </style> <script type="text/javascript"> function pl(fieldObj, elemID) { document.getElementById(elemID).className = (fieldObj.checked)?'checked':''; } </script> </head> <body> <form name="form1" method="post" action=""> <table border="1" cellspacing="0" cellpadding="0" class="" id="tbl1"> <tr> <td width="355">Tableclass 1 - not checked and no class. Works fine.</td> <td width="120"> </td> <td width="120"> </td> <td width="25"> <input type="checkbox" name="checkbox" id="checkbox" onclick="pl(this, 'tbl1')"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <br> <table border="1" cellspacing="0" cellpadding="0" class="checked" id="tbl2"> <tr> <td width="355">Tableclass 2 - checked and class set.</td> <td width="120"> </td> <td width="120"> </td> <td width="25"> <input name="checkbox" type="checkbox" id="checkbox" onclick="pl(this, 'tbl2')" checked> </td> </tr> <tr> <td><strong>PROBLEM!</strong> Why does not the background change??</td> <td> </td> <td> </td> <td> </td> </tr> </table> <br> <table border="1" cellspacing="0" cellpadding="0"> <tr class="" id="row1"> <td width="355">Rowclass 1 - not checked and no class. Works fine.</td> <td width="120"> </td> <td width="120"> </td> <td width="25"> <input type="checkbox" name="checkbox2" id="checkbox2" onclick="pl(this, 'row1')"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <br> <table border="1" cellspacing="0" cellpadding="0"> <tr class="checked" id="row2"> <td width="355">Row class 2 - checked and class set. Works fine.</td> <td width="120"> </td> <td width="120"> </td> <td width="25"> <input name="checkbox2" type="checkbox" id="checkbox2" onclick="pl(this, 'row2')" checked> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <br> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
lindm Posted July 19, 2008 Author Share Posted July 19, 2008 Works fine. Still annoying why the other code won't work...any guesses? Quote Link to comment Share on other sites More sharing options...
Psycho Posted July 19, 2008 Share Posted July 19, 2008 Offhand I coundn't determine why it didn't work and didn't want to invest a lot of time since I thought there was a more efficinet way to accomplish the objective. Quote Link to comment Share on other sites More sharing options...
lindm Posted July 20, 2008 Author Share Posted July 20, 2008 Got the answer here. http://www.dynamicdrive.com/forums/showthread.php?p=152126#post152126 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.