jQuery addClass example

Change class name on click in jQuery

by Sampath_Madhuranga

HTML

<div class="group-booking-confirmation">
  <table class="primary">
    <tr>
      <td class="title">Agent Name</td>
     <td> : Geethika Abeysinghe</td>
    </tr>
    <tr>
      <td class="title">Group Name</td>
     <td> : jghhh</td>
    </tr>
    <tr>
      <td class="title">Client ID</td>
     <td> : 13163</td>
    </tr>
    <tr>
      <td class="title">Number Of Groups</td>
     <td> : 2</td>
    </tr>
   </table>
   
   <table class="secondary">
     <tr>
      <td class="title">Preferred Hotel</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
        <table class="prefer">
        <tr>
          <td class="head">(Option 1)</td>
          <td class="head">(Option 2)</td>
          <td class="head">(Option 3)</td>
        </tr>
         <tr>
          <td class="data">Test Accomodation</td>
          <td class="data">YAS Island Rotana</td>
          <td class="data">Yas Viceroy</td>
        </tr>
      </table>
    </tr>
  </table>
  
</div>

SCSS

.group-booking-confirmation {
  table {
    width: 100%;
    tr {
      line-height: 22px;
      td {
        padding: 2px;
      }
    }
    &.prefer {
      font-size: 14px;
      td {
        padding: 5px 10px;
      }
    }
    &.primary {
      .title {
        font-weight: bold;
      }
      td:nth-child(1){
        width: 28%;
      }
      td:nth-child(2){
        width: 72%;
      }
    }
    &.secondary {
      .title {
        width: 28%;
        font-weight: bold;
      }
    }
  }
  .head {
    width: 33.33%;
    font-weight: bold;
    background-color: #faebd7;
  }
  .data {
    width: 33.33%;
    background-color: #fbf5ed;
  }
}