I am trying to make a description row appear onclick of a row?

Question

i wanted to make this work when i click on a row the description would appear . this is working but i only want the this.Description row appear and the other rows of the description hid. i tried using the toggle but that is also not working.

my code is:

//LAB 10 - 2 INVENTORY PAGE
//alert("2 - connected");
jQuery(document).ready(function() {

  $("#tblInventory").ready(function() {
    $(".desc").hide();
  });

  $("tr").hover(function() {
      $(this).css({
        'background': '#FF0000',
        'color': '#FFFFFF'
      });
    },
    function() {
      $(this).css({
        'background': '#FFFFFF',
        'color': '#000000'
      });
    });

  $("#tblInventory").click(function() {
    $('.desc').show();
  });

});

table {
  border: 1px solid;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
}

.selected {
  background: red;
  color: white;
}



  Product Inventory
  
    
      UPC
      Name
      Quantity
      Description
    
  
  
    
      987456
      Product Blanks
      345
      Unfinished template for parts 1000222 to 1000299
    
    
      654123
      Threaded Rods
      211
      Rods threaded at both ends for Support Brackets
    
    
      321789
      Flange Plates
      87
      Interface for product blank and threaded rod
    
    
      258963
      Flange Plate Bolts
      556
      1/2" bolts to secure blanks to flange plates
    
    
      198753
      Support Brackets
      11
      4' lengths to secure flange plates

user_1491895 · Answer

Put the click handler on the tr, not the table, and then use $(this).find(".desc") to get the element to show.

You can use .toggle() instead of .show() so it appears on the first click and goes away on the second.

There's no need to use $("#tblInventory").ready(). The ready event only applies to the document, so calling it on any other element is treated like calling it on $(document). And since you're already in the $(document).ready() function, you don't need to do it again.

//LAB 10 - 2 INVENTORY PAGE
//alert("2 - connected");
jQuery(document).ready(function() {

  $(".desc").hide();
  
  $("tr").hover(function() {
      $(this).css({
        'background': '#FF0000',
        'color': '#FFFFFF'
      });
    },
    function() {
      $(this).css({
        'background': '#FFFFFF',
        'color': '#000000'
      });
    });

  $("tr").click(function() {
    $(this).find('.desc').toggle();
  });

});

table {
  border: 1px solid;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
}

.selected {
  background: red;
  color: white;
}



  Product Inventory
  
    
      UPC
      Name
      Quantity
      Description
    
  
  
    
      987456
      Product Blanks
      345
      Unfinished template for parts 1000222 to 1000299
    
    
      654123
      Threaded Rods
      211
      Rods threaded at both ends for Support Brackets
    
    
      321789
      Flange Plates
      87
      Interface for product blank and threaded rod
    
    
      258963
      Flange Plate Bolts
      556
      1/2" bolts to secure blanks to flange plates
    
    
      198753
      Support Brackets
      11
      4' lengths to secure flange plates

user_18144510 · Answer

jQuery(document).ready(function() {

  $(".desc").hide();

  $("tr").hover(function() {
      $(this).css({
        'background': '#FF0000',
        'color': '#FFFFFF'
      });
    },
    function() {
      $(this).css({
        'background': '#FFFFFF',
        'color': '#000000'
      });
    });

  $('.showDesc').click(function() {
    $('.desc').hide();
    $(this).find(".desc").show();
  });


});

user_10921014 · Answer

Are you looking for this one ???

//LAB 10 - 2 INVENTORY PAGE
//alert("2 - connected");
jQuery(document).ready(function() {

  $("#tblInventory").ready(function() {
    $(".desc").hide();
  });

  $("tr").hover(function() {
      $(this).css({
        'background': '#FF0000',
        'color': '#FFFFFF'
      });
    },
    function() {
      $(this).css({
        'background': '#FFFFFF',
        'color': '#000000'
      });
    });

  $(".desc").parent('tr').click(function() {
  var descData = $(this).children('td.desc').text()

  //alert(descData)
    $('thead tr, tbody tr').hide();
    $( "#appendHead" ).append('Back      Description');
    $( "#appendBody" ).append(''+descData+'');
});
$(document).on('click', 'a.back', function(){ 
     $('thead tr, tbody tr').show();
     $('.dyn').remove();
     });
});

table {
  border: 1px solid;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
}

.selected {
  background: red;
  color: white;
}



  Product Inventory
  
    
      UPC
      Name
      Quantity
       Back      Description
    
  
  
    
      987456
      Product Blanks
      345
      Unfinished template for parts 1000222 to 1000299
    
    
      654123
      Threaded Rods
      211
      Rods threaded at both ends for Support Brackets
    
    
      321789
      Flange Plates
      87
      Interface for product blank and threaded rod
    
    
      258963
      Flange Plate Bolts
      556
      1/2" bolts to secure blanks to flange plates
    
    
      198753
      Support Brackets
      11
      4' lengths to secure flange plates

user_14229690 · Answer

On tr click hide all desc class and show only clicked desc class using:

$("tr").click(function() {
    $(".desc").hide();
    $(this).find('.desc').show();
});

jQuery(document).ready(function() {
  $(".desc").hide();
  $("tr").hover(function() {
      $(this).css({
        'background': '#FF0000',
        'color': '#FFFFFF'
      });
    },
    function() {
      $(this).css({
        'background': '#FFFFFF',
        'color': '#000000'
      });
    });

  $("tr").click(function() {
    $(".desc").hide();
    $(this).find('.desc').show();
  });
});

table {
  border: 1px solid;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
}

.selected {
  background: red;
  color: white;
}



  Product Inventory
  
    
      UPC
      Name
      Quantity
      Description
    
  
  
    
      987456
      Product Blanks
      345
      Unfinished template for parts 1000222 to 1000299
    
    
      654123
      Threaded Rods
      211
      Rods threaded at both ends for Support Brackets
    
    
      321789
      Flange Plates
      87
      Interface for product blank and threaded rod
    
    
      258963
      Flange Plate Bolts
      556
      1/2" bolts to secure blanks to flange plates
    
    
      198753
      Support Brackets
      11
      4' lengths to secure flange plates

user_18144510 · Answer

jQuery(document).ready(function() {

    $(".desc").hide();
    
    $("tr").hover(function() {
        $(this).css({
          'background': '#FF0000',
          'color': '#FFFFFF'
        });
      },
      function() {
        $(this).css({
          'background': '#FFFFFF',
          'color': '#000000'
        });
      });
  
  $('.showDesc').click(function(){
      $('.desc').hide();
      $(this).find(".desc").show();
  });
  
  
  });

table {
  border: 1px solid;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
}

.selected {
  background: red;
  color: white;
}


    
        Product Inventory
        
            UPC Name Quantity Description
        
        
            
                987456 Product Blanks 345 Unfinished template for parts 1000222 to 1000299
            
            
                654123 Threaded Rods 211 Rods threaded at both ends for Support Brackets
            
            
                321789 Flange Plates 87 Interface for product blank and threaded rod
            
            
                258963 Flange Plate Bolts 556 1/2" bolts to secure blanks to flange plates
            
            
                198753 Support Brackets 11 4' lengths to secure flange plates

user_2813224 · Answer

Mutually Exclusive Behavior Between

a Group of Elements

^{Like the way a group of radio buttons permit only a single button to be checked at any given time.}

The following example behavior is as follows:

Clicking the last toggles show/hide of all .desc
Clicking any within the hides all .desc and then quickly show/hide the .desc of the clicked .
The hover behavior was removed and then added in CSS.

tbody tr:hover td {
  background: tomato;
  color: #fff;
}

Details are commented in example below

// When page is loaded all .desc are hidden
$(".desc").hide();

// All  in  plus .all are bound to the click event
$("tbody tr, .all").on('click', function() {
  // If user clicked .all...
  if ($(this).is('.all')) {
    // toggle .on and .off
    $(this).toggleClass('on off');
    // If .all is .on,... 
    if ($(this).is('.on')) {
      // ...show all .desc
      $('.desc').show();
      // Otherwise hide all .desc
    } else $('.desc').hide();
    // If user clicked  in a ...
  } else if ($(this).is('tbody tr')) {
    // Reset all .desc...
    $('.desc').hide(); // *️⃣
    // ...toggle .on and .off and show and hide
    $(this).toggleClass('on off');
    $(this).find('.desc').toggle();
  } else return false;
});
/* *️⃣ Remove or comment out the designated line to change the current behavior of the 
show/hide tags. */

table {
  table-layout: fixed;
  border: 1px solid;
}

tbody tr:hover td {
  background: tomato;
  color: #fff;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
  cursor: pointer;
}

.selected {
  background: red;
  color: white;
}


  Product Inventory
  
    
      UPC
      Name
      Quantity
      Description
    
  
  
    
      987456
      Product Blanks
      345
      Unfinished template for parts 1000222 to 1000299
    
    
      654123
      Threaded Rods
      211
      Rods threaded at both ends for Support Brackets
    
    
      321789
      Flange Plates
      87
      Interface for product blank and threaded rod
    
    
      258963
      Flange Plate Bolts
      556
      1/2" bolts to secure blanks to flange plates
    
    
      198753
      Support Brackets
      11
      4' lengths to secure flange plates

I am trying to make a description row appear onclick of a row?

6 Answers

Mutually Exclusive Behavior Between

a Group of Elements