how to show table cell using js

April 4, 2022

description cells will starts as hide. The row that I click, will show the description and if i click another row will the current row description and hide the other description

var getTable = document.querySelector("tbody");
var cells = getTable.getElementsByTagName("td");

for (let item of document.getElementsByClassName("desc")) {
  item.style.display = "none";
}
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("click", function () {
    var selectedRow =
      getTable.getElementsByTagName("tr")[this.parentNode.rowIndex];
    if (!this.parentNode.rowIndex) {
      $(selectedRow).find(".desc").css("display", "none");
    } else {
      $(selectedRow).find(".desc").css("display", "block");
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblInventory">
  <thead>
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td class="desc">Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td class="desc">Rods threaded at both ends for Support Brackets</td>
    </tr>
  </tbody>
</table>

>Solution :

Try this in vanilla:

document.querySelector('#tblInventory').addEventListener('click', (e) => 
{
  // Hide other descriptions
  document.querySelectorAll('#tblInventory td.desc span').forEach(span => {
     span.style.display = 'none';
  });
  
  // Show clicked row description
  if (e.target.tagName === 'TD') {
    e.target.parentNode.querySelector('td.desc span').style.display = 'inline';
  }
});

#tblInventory td.desc span {
  display: none
}

<table id="tblInventory">
  <thead>
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td class="desc"><span>Unfinished template for parts 1000222 to 1000299</span></td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td class="desc"><span>Rods threaded at both ends for Support Brackets</span></td>
    </tr>
  </tbody>
</table>

Or with jQuery:

$('#tblInventory').on('click', 'td', (e) => {
  // Hide other descriptions
  $('#tblInventory td.desc span').hide();

  // Show clicked row description
  $(e.target).closest('tr').find('td.desc span').show();
});

#tblInventory td.desc span {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table id="tblInventory">
  <thead>
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td class="desc"><span>Unfinished template for parts 1000222 to 1000299</span></td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td class="desc"><span>Rods threaded at both ends for Support Brackets</span></td>
    </tr>
  </tbody>
</table>

Using span is a suggestion, but you can fix the selectors to show/hide the td elements directly as well;
If you don’t want to hide previous clicked descriptions, just remove the related code.