jimfog Posted May 13, 2013 Share Posted May 13, 2013 In a series of td elements(enclosed in a tr element) I have set a class were the css is set to display:none.So, when the user comes to the page for the 1st time he does not see the html mentioned above....this: <tr class="selections"> <td> <label class="label" for="buztype">...ς</label><br></td> <td><input type="radio" name="buztype" value="1" checked> ...<br></td> <td> <input type="radio" name="buztype" value="3"> ... <br></td> <td> <input type="radio" name="buztype" value="4">...<br></td> <td><input type="radio" name="buztype" value="5">... <br></td> <td><input type="radio" name="buztype" value="2">...<br></td> </tr>.selections{ display: none; } If the user clicks an icon(edit) in the form the above class is removed and the above html is displayed: $('.edit').click(function() { $('.selections').removeClass('selections'); }); The problem is what to do when the user clicks the cancel button the above html must be hidden again...How can I do that? The html does not have a class anymore so as to grab it with jquery and hide it again.How am I going to target the above tr element now that it's class is removed. Link to comment Share on other sites More sharing options...
jeffman Posted May 13, 2013 Share Posted May 13, 2013 Remember that an element can have more than one class. The great thing about removeClass is that you can remove one (or more) classes at a time, you don't have to remove all of them. So in this situation, you can give your .selections element a second class. That will give you another selector to search for. Of course, if there is only one element you need to do this to, it can have an id that you search for. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 14, 2013 Share Posted May 14, 2013 Depends if the edit or cancel buttons target a specific tr row group (as in placed directly above it, or beside it), then you just target that tr row and reinstate the class, OR instead of just removing class, replace with class to show (selections-show) with display: block; You could have instead of edit and cancel button, just have a single, edit at beginning, when it is click, the table row shows and the 'edit' text on button changes to 'cancel' and then use .toggle() to go from display: none to block and vice versa on each click. But! it all depends on the layout of table rows to edit/cancel buttons you have, as there can be many ways of achieveing this depending on your layout. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 16, 2013 Share Posted May 16, 2013 examples: you really don't require 'selection' classname next() on its own, will refer to next sibling tr row. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(function(){$('.edit').click(function() { $(this).parents('tr').next('.selections').removeClass('selections'); });$('.cancel_but').click(function() { $(this).parents('tr').next().addClass('selections'); }); $('.edit2').click(function() { $(this).val()=='Edit' ? $(this).val('Cancel') : $(this).val('Edit'); $(this).parents('tr').next('.selections2').toggle(); }); });/*--*//*]]>*/</script><style type="text/css">.selections, .selections2 {display:none;}</style></head><body><table width="100%" border="1" cellspacing="0" cellpadding="0"><tr><td colspan="6"><input type="button" class="edit" value="Edit"><input type="button" class="cancel_but" value="Cancel"></td></tr><tr class="selections"> <td> <label class="label" for="buztype">...ς</label><br></td> <td><input type="radio" name="buztype" value="1" checked> ...<br></td> <td> <input type="radio" name="buztype" value="3"> ... <br></td> <td> <input type="radio" name="buztype" value="4">...<br></td> <td><input type="radio" name="buztype" value="5">... <br></td> <td><input type="radio" name="buztype" value="2">...<br></td> </tr> <tr><td colspan="6"><input type="button" class="edit" value="Edit"><input type="button" class="cancel_but" value="Cancel"></td></tr> <tr class="selections"> <td> <label class="label" for="buztype">...ς</label><br></td> <td><input type="radio" name="buztype" value="1" checked> ...<br></td> <td> <input type="radio" name="buztype" value="3"> ... <br></td> <td> <input type="radio" name="buztype" value="4">...<br></td> <td><input type="radio" name="buztype" value="5">... <br></td> <td><input type="radio" name="buztype" value="2">...<br></td> </tr> <tr><td colspan="6"><input type="button" class="edit" value="Edit"><input type="button" class="cancel_but" value="Cancel"></td></tr> <tr class="selections"> <td> <label class="label" for="buztype">...ς</label><br></td> <td><input type="radio" name="buztype" value="1" checked> ...<br></td> <td> <input type="radio" name="buztype" value="3"> ... <br></td> <td> <input type="radio" name="buztype" value="4">...<br></td> <td><input type="radio" name="buztype" value="5">... <br></td> <td><input type="radio" name="buztype" value="2">...<br></td> </tr></table><table width="100%" border="1" cellspacing="0" cellpadding="0"><tr><td colspan="6"><input type="button" class="edit2" value="Edit"></td></tr><tr class="selections2"> <td> <label class="label" for="buztype">...ς</label><br></td> <td><input type="radio" name="buztype" value="1" checked> ...<br></td> <td> <input type="radio" name="buztype" value="3"> ... <br></td> <td> <input type="radio" name="buztype" value="4">...<br></td> <td><input type="radio" name="buztype" value="5">... <br></td> <td><input type="radio" name="buztype" value="2">...<br></td> </tr> <tr><td colspan="6"><input type="button" class="edit2" value="Edit"></td></tr> <tr class="selections2"> <td> <label class="label" for="buztype">...ς</label><br></td> <td><input type="radio" name="buztype" value="1" checked> ...<br></td> <td> <input type="radio" name="buztype" value="3"> ... <br></td> <td> <input type="radio" name="buztype" value="4">...<br></td> <td><input type="radio" name="buztype" value="5">... <br></td> <td><input type="radio" name="buztype" value="2">...<br></td> </tr> <tr><td colspan="6"><input type="button" class="edit2" value="Edit"></td></tr> <tr class="selections2"> <td> <label class="label" for="buztype">...ς</label><br></td> <td><input type="radio" name="buztype" value="1" checked> ...<br></td> <td> <input type="radio" name="buztype" value="3"> ... <br></td> <td> <input type="radio" name="buztype" value="4">...<br></td> <td><input type="radio" name="buztype" value="5">... <br></td> <td><input type="radio" name="buztype" value="2">...<br></td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now