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

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 >Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td >Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td >Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td >1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td >4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

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 >Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td >Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td >Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td >1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td >4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

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


});

CodePudding user response：

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 ><th ><a style="color: #fff" href="#!" >Back</a> &nbsp;  &nbsp; Description</th></tr>');
    $( "#appendBody" ).append('<tr ><td >' 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 > <a style="color: #fff" href="#!" >Back</a> &nbsp;  &nbsp; Description</th>
    </tr>
  </thead>
  <tbody id="appendBody">
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td>345</td>
      <td >Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td >Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td >Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td >1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td >4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

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 >Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td >Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td >Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td >1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td >4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>