jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<table id="sortable">
  <tr>
    <th width="166">Fixed Income - Duration Distribution Grid</th>
    <th>1</th>
    <th>2</th>
  </tr>

  <tr>
    <td>Preceding Heading</td>
    <td><strong>Duration Distribution</strong></td>
    <td></td>
  </tr>
  <tr>
    <td>Header</td>
    <td></td>
    <td>Portfolio (%)<br>/formatdate($_Date$)</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>$Duration$</td>
    <td align="right"><strong>$PctPOIPrior$</strong></td>
  </tr>
  <tr>
    <td>Total</td>
    <td><strong>Total</strong></td>
    <td><strong>/sum($PctPOIPrior$)</strong></td>
  </tr>
</table>

CSS

body {
  font-family: "Segoe UI";
  color: #3f3f3f;
  /*zoom:3;*/
}

td {
  background: #e9e6e6;
  padding: 4px 10px;
  color: #636262;
  font-size: 12px;
}

td:first-child {
  background: #dad5d5;
}

th:first-child {
  background: #e9e6e6;
  color: #3f3f3f;
  text-align: left;
}

th {
  font-size: 20px;
  padding: 10px;
  background: #dad5d5;
}

td:hover,
th:not(:first-child):hover {
  background: #6b6a6aa8 !important;
  color: #fff;
  cursor: pointer;
}

td:active,
th:active {
  background: #484545 !important;
  color: #fff;
  cursor: pointer;
}

.active:hover {
  background: #058fbd !important;
  color: #fff;
  cursor: pointer;
}

.active {
  border: 1px solid #058fbd !important; 
}

td:first-child:hover~td {
  background: #058fbd94 !important;
  color: #fff;
}

td:first-child:hover {
  background: #6b6a6aa8 !important;
  color: #fff;
}

.activeRow td,
.activeCol,
.activeColTemp {
  background: #058fbd94 !important;
  color: #fff;
}

th.activeCol,
.activeRow td:first-child {
  background: #6b6a6aa8 !important;
  color: #fff;
}

JavaScript

$('td').click(function() {
  //$('.active').removeClass('active');
  //$(this).addClass('active');
  $('.activeRow').removeClass('activeRow');
  $('.activeCol').removeClass('activeCol');
  $('.activeColTemp').removeClass('activeColTemp');
  $(this).toggleClass('active');
});


//Column Click
$('th').click(function() {
  $('.active').removeClass('active');
  $('.activeRow').removeClass('activeRow');
  $('.activeCol').removeClass('activeCol');
  $('.activeColTemp').removeClass('activeColTemp');
  //$(this).addClass('activeCol');
  var t = parseInt($(this).index()) + 1;
  $('td:nth-child(' + t + ')').addClass('activeCol');
  $(this).addClass('activeCol');
});

//Row Click
$('td:first-child').click(function() {
  $('.active').removeClass('active');
  $('.activeRow').removeClass('activeRow');
  $('.activeCol').removeClass('activeCol');
  $('.activeColTemp').removeClass('activeColTemp');
  $(this).parent().addClass('activeRow');
  //$(this).toggleClass('active');
});


//Hover Column
$('th:not(th:first-child)').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('activeColTemp');
  },
  function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('activeColTemp');
  });

/* Drag Drop rows, cols and cells

$( function() {
    $( "#sortable tr" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
*/