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

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblInventory">
  <caption>Product Inventory</caption>
  <thead>
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Quantity</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td>345</td>
      <td class="desc">Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td class="desc">Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td class="desc">Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td class="desc">1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td class="desc">4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>
htmljquerycss


Solution 1:[1]

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 <th> toggles show/hide of all .desc
  • Clicking any <tr> within the <tbody> hides all .desc and then quickly show/hide the .desc of the clicked <tr>.
  • 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 <tr> in <tbody> 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 <tr> in a <tbody>...
  } 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;
}
<table id="tblInventory">
  <caption>Product Inventory</caption>
  <thead>
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Quantity</th>
      <th class='all on'>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr class='on'>
      <td>987456</td>
      <td>Product Blanks</td>
      <td>345</td>
      <td class="desc">Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr class='on'>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td class="desc">Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr class='on'>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td class="desc">Interface for product blank and threaded rod</td>
    </tr>
    <tr class='on'>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td class="desc">1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr class='on'>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td class="desc">4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Solution 2:[2]

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblInventory">
  <caption>Product Inventory</caption>
  <thead>
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Quantity</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td>345</td>
      <td class="desc">Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td class="desc">Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td class="desc">Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td class="desc">1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td class="desc">4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>

Solution 3:[3]

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();
  });


});

Solution 4:[4]

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('<tr class="dyn"><th class="desc"><a style="color: #fff" href="#!" class="back">Back</a> &nbsp;  &nbsp; Description</th></tr>');
    $( "#appendBody" ).append('<tr class="dyn"><td class="desc">'+descData+'</td></tr>');
});
$(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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblInventory">
  <caption>Product Inventory</caption>
  <thead id="appendHead">
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Quantity</th>
      <th class="desc"> <a style="color: #fff" href="#!" class="back">Back</a> &nbsp;  &nbsp; Description</th>
    </tr>
  </thead>
  <tbody id="appendBody">
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td>345</td>
      <td class="desc">Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td class="desc">Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td class="desc">Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td class="desc">1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td class="desc">4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>

Solution 5:[5]

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblInventory">
  <caption>Product Inventory</caption>
  <thead>
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Quantity</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td>345</td>
      <td class="desc">Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td class="desc">Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td class="desc">Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td class="desc">1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td class="desc">4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>

Solution 6:[6]

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table id="tblInventory">
        <caption>Product Inventory</caption>
        <thead>
            <tr><th>UPC</th><th>Name</th><th>Quantity</th><th>Description</th></tr>
        </thead>
        <tbody>
            <tr class="showDesc">
                <td>987456</td><td>Product Blanks</td><td>345</td><td class="desc">Unfinished template for parts 1000222 to 1000299</td>
            </tr>
            <tr class="showDesc">
                <td>654123</td><td>Threaded Rods</td><td>211</td><td class="desc">Rods threaded at both ends for Support Brackets</td>
            </tr>
            <tr class="showDesc">
                <td>321789</td><td>Flange Plates</td><td>87</td><td class="desc">Interface for product blank and threaded rod</td>
            </tr>
            <tr class="showDesc">
                <td>258963</td><td>Flange Plate Bolts</td><td>556</td><td class="desc">1/2" bolts to secure blanks to flange plates</td>
            </tr>
            <tr class="showDesc">
                <td>198753</td><td>Support Brackets</td><td>11</td><td class="desc">4' lengths to secure flange plates</td>
            </tr>
        </tbody>
    </table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Barmar
Solution 3 Ravi Dhingra
Solution 4
Solution 5 Sahil Thummar
Solution 6 Ravi Dhingra

Related Questions