code_junkie

Using JQuery to find the next table row

Nov 11th, 2011
168
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.74 KB | None | 0 0
  1. <tr>
  2. <td class="expand"><img src="plus.gif"/></td>
  3. <td>Data1</td><td>Data2</td><td>Data3</td>
  4. </tr>
  5. <tr class="show hide">
  6. <td> </td>
  7. <td>Data4</td><td>Data5</td><td>Data6</td>
  8. </tr>
  9.  
  10. $(document).ready(function(){
  11. $('.expand').click(function() {
  12. if( $(this).hasClass('hidden') )
  13. $('img', this).attr("src", "plus.jpg");
  14. else
  15. $('img', this).attr("src", "minus.jpg");
  16.  
  17. $(this).toggleClass('hidden');
  18. $(this).parent().next().toggle();
  19. });
  20. });
  21.  
  22. $(document).ready( function () {
  23. $(".expand").click(function() {
  24. $("img",this).attr("src",
  25. $("img",this)
  26. .attr("src")=="minus.gif" ? "plus.gif" : "minus.gif"
  27. );
  28. $(this).parent().next().toggle();
  29. });
  30. });
  31.  
  32. //this will bind the click event
  33. //put this in a $(document).ready or something
  34. $(".expand").click(expand_ClickEvent);
  35.  
  36. //this is your event handler
  37. function expand_ClickEvent(){
  38. //get the TR that you want to show/hide
  39. var TR = $('.expand').parent().next();
  40.  
  41. //check its class
  42. if (TR.hasClass('hide')){
  43. TR.removeClass('hide'); //remove the hide class
  44. TR.addClass('show'); //change it to the show class
  45. TR.show(); //show the TR (you can use any jquery animation)
  46.  
  47. //change the image URL
  48. //select the expand class and the img in it, then change its src attribute
  49. $('.expand img').attr('src', 'minus.gif');
  50. } else {
  51. TR.removeClass('show'); //remove the show class
  52. TR.addClass('hide'); //change it to the hide class
  53. TR.hide(); //hide the TR (you can use any jquery animation)
  54.  
  55. //change the image URL
  56. //select the expand class and the img in it, then change its src attribute
  57. $('.expand img').attr('src', 'plus.gif');
  58. }
  59. }
  60.  
  61. <tr>
  62.  
  63. <td colspan="2" align="center"
  64. <input type="image" src="save.gif" id="saveButton" name="saveButton"
  65. style="visibility: collapse; display: none"
  66. onclick="ToggleFunction(false)"/>
  67.  
  68. <input type="image" src="saveDisabled.jpg" id="saveButtonDisabled"
  69. name="saveButton" style="visibility: collapse; display: inline"
  70. onclick="ToggleFunction(true)"/>
  71. </td>
  72. </tr>
  73.  
  74. ToggleFunction(seeSaveButton){
  75. if(seeSaveButton){
  76. $("#saveButton").attr("disabled", true)
  77. .attr("style", "visibility: collapse; display: none;");
  78. $("#saveButtonDisabled").attr("disabled", true)
  79. .attr("style", "display: inline;");
  80. }
  81. else {
  82. $("#saveButton").attr("disabled", false)
  83. .attr("style", "display: inline;");
  84. $("#saveButtonDisabled")
  85. .attr("disabled", true)
  86. .attr("style", "visibility: collapse; display: none;");
  87. }
  88. }
Add Comment
Please, Sign In to add comment