jQuery addClass example

Change class name on click in jQuery

by radi8

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<div id='inv_data_main'>
  <table class="reference" id="inv_data" style="width:95%;">
    <caption>Inventory Results</caption>
    <thead>
      <tr>
        <th>Select</th>
        <th>Branch</th>
        <th>Item #</th>
        <th>Description</th>
        <th>Description 2</th>
        <th>Stock Type</th>
        <th>Config</th>
        <th>Printing Program</th>
        <th>Style</th>
        <th>Weight</th>
        <th>Color</th>
        <th>Family</th>
        <th>TTL On Hand</th>
        <th>Qty Avail</th>
      </tr>
    </thead>
    <tbody>
      <tr id="tr-7036">
        <td><input class="itm_check" type="checkbox" name="7036" value="7036"></td>
        <td>1002</td>
        <td>01-00150-0290 </td>
        <td>C200 Custom Black </td>
        <td>14750/Tower </td>
        <td>M</td>
        <td>TW </td>
        <td> </td>
        <td>C </td>
        <td>CU </td>
        <td>BL </td>
        <td>BLW </td>
        <td>0</td>
        <td>-29,500</td>
      </tr>
      <tr id="tr-7008">
        <td><input class="itm_check" type="checkbox" name="7008" value="7008"></td>
        <td>1002</td>
        <td>01-00100-0201 </td>
        <td>C100 XL Black </td>
        <td>140/Stack </td>
        <td>M</td>
        <td>TST</td>
        <td> </td>
        <td>C </td>
        <td>XL </td>
        <td>BL </td>
        <td>BLW </td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr id="tr-7031">
        <td><input class="itm_check" type="checkbox" name="7031" value="7031"></td>
        <td>1002</td>
        <td>01-00150-0200 </td>
        <td>C200 Custom Black </td>
 ...

CSS

table.reference{
        border: 1px solid #c3c3c3;
        border-collapse: collapse;
    }
    table.reference td{
        border: 1px solid #c3c3c3;
        padding: 3px;
        vertical-align: top;
        font-size: 0.85em;
    }
    table.reference caption{
        background-color: #e5eecc;
        border: 1px solid #c3c3c3;
        padding: 3px;
        vertical-align: top;
        font-size: medium;
        font-weight: bold;
        vertical-align: top;
        font-size: 1em;
    }
    table.reference tr{
        vertical-align: top;
    }
    table.reference tr.hold{
        /*border: 1px solid red;*/
        background-color: yellow;
    }
    table.reference td.hold{
        background: yellow;
        font-weight: bold;
    }
    table.reference thead th{
        background-color: #e5eecc;
        border: 1px solid #c3c3c3;
        padding: 3px;
        vertical-align: top;
        font-weight: bold;
        font-size: 0.85em;
    }
    table.reference tfoot th{
        background-color: #e5eecc;
        border: 1px solid #c3c3c3;
        padding: 3px;
        vertical-align: top;
        font-weight: normal;
        font-size: smaller;
    }
    table.reference tfoot td{
        background-color: #e5eecc;
        border: 1px solid #c3c3c3;
        padding: 3px;
        vertical-align: top;
        font-weight: normal;
        font-size: smaller;
    }
/*
    table.reference tr.warning th{
        background-color: #f0a000;
        color:white;
        font-weight: bold;
        border: 1px solid #c3c3c3;
        padding: 3px;
        vertical-align: top;
    }
    table.reference tr.warning1 th{
        background-color: #FBB917;
        color:black;
        font-weight: bold;
        border: 1px solid #c3c3c3;
        padding: 3px;
        vertical-align: top;
    }
    table.reference caption.warning{
        background-color: #f0a000;
        color:white;
        font-weight: bold;
        border: 1px solid #c3c3c3;
        padding: 3px;
     ...

JavaScript

$(document).ready(function() {
  var tablename = 'inv_data';
  /*
  var oTable = $('#' + tablename).dataTable({
      "sSearch": "Search all columns:",
      "sPaginationType": "full_numbers",
      //"paging": false,
      "bFilter": false,
      "sScrollXInner": "110%",
      //"aoColumns": col,
      "sDom": 'Bfrtip'
    });
   */
  $('#' + tablename + ' tr').click(function() {
    $(this).toggleClass('row_selected');
  });
  $.fn.dataTableExt.oApi.fnGetColumnData = function(oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) {
    // check that we have a column id
    if (typeof iColumn == "undefined") return new Array();

    // by default we only want unique data
    if (typeof bUnique == "undefined") bUnique = true;

    // by default we do want to only look at filtered data
    if (typeof bFiltered == "undefined") bFiltered = true;

    // by default we do not want to include empty values
    if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true;

    // list of rows which we're going to loop through
    var aiRows, iRow;

    // use only filtered rows
    if (bFiltered == true) aiRows = oSettings.aiDisplay;
    // use all rows
    else aiRows = oSettings.aiDisplayMaster; // all row numbers

    // set up data array
    var asResultData = new Array();

    for (var i = 0, c = aiRows.length; i < c; i++) {
      iRow = aiRows[i];
      var aData = this.fnGetData(iRow);
      var sValue = aData[iColumn];
      var el = sValue.substring(0, 1);
      if (el === '<') {
        var el1 = sValue.split('>');
        var el2 = el1[1].split('<');
        sValue = el2[0];
      }
      // ignore empty values?
      if (bIgnoreEmpty === true && (typeof(sValue) === 'undefined' || sValue.length === 0)) continue;

      // ignore unique values?
      else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;

      // else push the value onto the result data array
      else asResultData.push(sValue);
    }

    return asResultData;
  }
 ...