• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 625
  • Last Modified:

expand collapse table rows using jquery

I have a problem expanding collapsing a table rows. In my previous post
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_27860185.html

the solution was given and it is a correct one . however, not everything is working because when i click on row which do not have any images the row is still adding an image

<style type="text/css">

table {
                font-family: arial;
                border-collapse: collapse;
                width: 800px;
            }

       tr.level1{
            background-color: #9c9c9c;

      }


      tr.level2{
            background-color: #c5d1ad;
      }

      tr.level3{
            background-color: #d9d9d9;
      }

      tr.level4{
            background-color: #F5F5F5;
      }

      #userPath{ border:1px;

      }

      tr.lvlcollapse td {
                vertical-align: middle;
                padding: 5px;
            }


                  tr.level1 img {
                padding-left: 5px;
                padding-right: 5px;
                vertical-align: middle;
            }
            tr.level2 img {
                padding-left: 25px;
                padding-right: 5px;
                vertical-align: middle;
            }
            tr.level3 img {
                padding-left: 45px;
                padding-right: 5px;
                vertical-align: middle;
            }
            tr.level4 img {
                padding-left: 65px;
                padding-right: 5px;
            }




</style>
<script>
      function getClass (ele, nib) {
            classList = ele.attr('class').split(/\s+/);
            var rgx   = new RegExp(nib);
            var find;
            $.each( classList, function(index, item){
                if ( rgx.test(item) ) {
                    find = item;
                    return false;
                }
            });
            return find;
        }
        function getLevel (ele) {
            classList = ele.attr('class').split(/\s+/);
            var lvl   = 99;
            var gtc   = getClass(ele, '^level\\d+$');
            if ( gtc != undefined ) lvl = gtc.substr(5);
            return lvl;
        }
        function switchImage (ele) {
            // icons from http://sekkyumu.deviantart.com/art/Developpers-Icons-63052312
            var fimg = ele.find('img');
            var curr = fimg.attr('src');
            if ( curr == <cfoutput>'#application.settings.icons.bigplus#'</cfoutput> ) fimg.attr('src',<cfoutput>'#application.settings.icons.bigminus#'</cfoutput>);
            else fimg.attr('src',<cfoutput>'#application.settings.icons.bigplus#'</cfoutput>);
        }

       $(document).ready(function(){
              $("tr.lvlcollapse").click(function() {
                var tnow     = $.now();
                var allClass = $(this).attr('class');
                  var level    = getLevel($(this));
                var state    = getClass($(this), '^clicked\\d+$');
                if ( state == undefined ) {
                    state = "closing";
                    $(this).addClass("clicked"+tnow);
                } else {
                    $(this).removeClass(state);
                    tnow = state.substr(6);
                }
                switchImage($(this));
                  $(this).nextAll(".lvlcollapse").each(function() {
                      var sublvl   = getLevel($(this));
                    var subtnow  = 0;
                    var substate = getClass($(this), '^closed\\d+$');
                    if ( substate != undefined ) subtnow = substate.substr(5);
                      if ( sublvl > level ) {
                        if ( state == "closing" && subtnow == 0 ) {
                            $(this).addClass("closed"+tnow);
                              $(this).toggle();
                        } else if ( subtnow == tnow ) {
                            $(this).removeClass(substate);
                              $(this).toggle();
                        }
                      } else {
                          return false;
                      }
                  });
              });
          });

</script>

the source code is attached
test.txt
0
erikTsomik
Asked:
erikTsomik
1 Solution
 
leakim971PluritechnicianCommented:
I did not fully check the code, but try this :
$(document).ready(function(){
              $("tr.lvlcollapse").click(function() {

if( $(this).find("img").length > 0 ) { // IF WE FOUND AN IMAGE ON THIS ROW

                var tnow     = $.now();
                var allClass = $(this).attr('class');
                  var level    = getLevel($(this));
                var state    = getClass($(this), '^clicked\\d+$');
                if ( state == undefined ) {
                    state = "closing";
                    $(this).addClass("clicked"+tnow);
                } else {
                    $(this).removeClass(state);
                    tnow = state.substr(6);
                }
                switchImage($(this));
                  $(this).nextAll(".lvlcollapse").each(function() {
                      var sublvl   = getLevel($(this));
                    var subtnow  = 0;
                    var substate = getClass($(this), '^closed\\d+$');
                    if ( substate != undefined ) subtnow = substate.substr(5);
                      if ( sublvl > level ) {
                        if ( state == "closing" && subtnow == 0 ) {
                            $(this).addClass("closed"+tnow);
                              $(this).toggle();
                        } else if ( subtnow == tnow ) {
                            $(this).removeClass(substate);
                              $(this).toggle();
                        }
                      } else {
                          return false;
                      }
                  });

} // ENDIF

              });
          });

Open in new window

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now