jQuery addClass example

Change class name on click in jQuery

by in43sh

HTML

<table class="table-container__table">
  <thead class="table__table-header">
    <tr class="table__table-row">
      <th class="table__cell table__header-cell">DATE_TIME</th>
      <th class="table__cell table__header-cell">FIRST NAME</th>
      <th class="table__cell table__header-cell">LAST NAME</th>
      <th class="table__cell table__header-cell">PHONE</th>
      <th class="table__cell table__header-cell">EMAIL</th>
      <th class="table__cell table__header-cell">OFFER ID</th>
    </tr>
  </thead>
  <tbody class="table__table-body">
    <tr class="table__table-row">
      <td class="table__cell">01-15-2019 14:23</td>
      <td class="table__cell">NA</td>
      <td class="table__cell">NA</td>
      <td class="table__cell">NA</td>
      <td class="table__cell">NA</td>
      <td class="table__cell">NA</td>
    </tr>
    <tr class="table__table-row">
      <td class="table__cell">01-15-2019 14:09</td>
      <td class="table__cell">Ronald</td>
      <td class="table__cell">Tappert</td>
      <td class="table__cell">206-200-5772</td>
      <td class="table__cell">ronald.tappert@hotmail.com</td>
      <td class="table__cell">8751</td>
    </tr>
    <tr class="table__table-row expandable">
      <td class="table-row__details-container" colspan="6">
        <table class="details-container__details-table">
          <tr class="details-table__details-row">
            <td class="details-row__details-cell details-row__details-header">Date: </td>
            <td class="details-row__details-cell">01-15-2019</td>
            <td class="details-row__details-cell details-row__details-header">Transaction ID: </td>
            <td class="details-row__details-cell">9576238</td>
          </tr>
          <tr class="details-table__details-row">
            <td class="details-row__details-cell details-row__details-header">Time: </td>
            <td class="details-row__details-cell">14:09</td>
            <td class="details-row__details-cell details-row__details-header">Subtotal:...

CSS

/* TABLE */

.main-container__table-container {
  font-size: 1rem;
  word-wrap: break-word;
}

.table-container__header {
  padding: .5rem;
  font-size: 1rem;
  color: #fff;
  background-color: #666;
}

.table-container__table {
  width: 100%;
  table-layout: fixed;
  display: inline-block;
  overflow-x: auto;
  border-collapse: collapse;
  border: 1px solid rgb(200, 200, 200);
  font-size: 14px;
  text-align: left;
}

.table__table-header,
.table__table-body {
  width: 100%;
}

.table__table-row {
  width: 100%;
  border-bottom: 1px solid rgb(200, 200, 200) !important;
}

.table__header-cell {
  color: rgb(93, 133, 185);
}

.table__cell {
  height: 3rem;
  /* width: 8rem; */
  padding: .5rem;
}

/* EXPANDABLE ROW */

.table-row__details-container {
  width: 100%;
}

.details-container__details-table {
  width: 100%;
  margin: .5rem;
  border-collapse: collapse;
}

.details-table__details-row {
  vertical-align: top;
}

.details-row__details-cell {
  padding: .5rem;
}

.details-row__details-header {
  font-weight: bold;
}

.details-row__cel-avatar {
  padding: .5rem .25rem 0 .5rem;
}

.details-row__cel-avatar-wrapper {
  width: 130px;
}

.details-row__avatar {
  display: block;
  height: 8rem;
  max-width: 100%;
}

JavaScript

$(function() {
  $(".table-container__table").find(".expandable").hide();
  $(".table-container__table").click(function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") == 6) {
      $target.slideUp();
    } else {
      $target.closest("tr").next.find(".details-table__details-row").slideToggle();
    }
  });
});