jQuery addClass example

Change class name on click in jQuery

by Pradeep K. Pant

HTML

<script src="https://github.com/ppant/jshacks/tree/master/js/jquery.js"></script>
<script src="https://github.com/ppant/jshacks/blob/master/js/jquery.ui.js"></script>
<script src="https://github.com/ppant/jshacks/blob/master/js/jquery.dataTables_1_10.js"></script>
<script src="https://github.com/ppant/jshacks/blob/master/js/moment.min.js"></script>
<script src="https://github.com/ppant/jshacks/blob/master/js/datetime-moment.js"></script>
<script src="https://github.com/ppant/jshacks/blob/master/js/jquery.ui.core.js"></script>
<script src="https://github.com/ppant/jshacks/blob/master/js/jquery.ui.datepicker.js"></script>
<script src="https://github.com/ppant/jshacks/blob/master/js/jquery.ui.datepicker-nl.js"></script>
<script src="https://github.com/ppant/jshacks/blob/master/js/jquery.ui.datepicker-fr.js"></script>
<link rel="stylesheet" href="https://github.com/ppant/jshacks/blob/master/css/dataTable_sorting_on_date.css">
<link rel="stylesheet" href="https://github.com/ppant/jshacks/blob/master/css/jquery.dataTables.min.css">
<h3 class="ui_title">Employee joining data</h3>
<div class="ui_block">
<table id="myTable1" class="ui_table">
<thead id="table_head">
<tr>
<th style="width:150px;">Name</th>
<th style="width:50px;">Designation</th>
<th>Joining date</th>
</tr>
</thead>
<tbody>
<tr>
	<td>Ram</td>	
	<td>Engineer</td>
	<td>18/10/2015</td>	
</tr>
<tr>
	<td>Shyam</td>	
	<td>Engineer</td>
	<td>05/01/2012</td>	
</tr>
<tr>
	<td>Suresh</td>	
	<td>Sr. Engineer</td>
	<td>22/06/2010</td>	
</tr>
<tr>
	<td>Ahmed</td>	
	<td>Manager</td>
	<td>02/02/2002</td>	
</tr>
<tr>
	<td>Leena</td>	
	<td>Sr. Manager</td>
	<td>01/01/2018</td>	
</tr>
<tr>
	<td>Pradeep</td>	
	<td>Architect</td>
	<td>21/05/2012</td>	
</tr>
</tbody>
</table>
</div>

CSS

/* 1. GENERAL */
* {
	font-family: /* 'Roboto', */ Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	box-sizing: border-box;
}

body {
	font-family: /* 'Roboto', */ Verdana, Arial, sans-serif;
	background: #f8f8f8; /* e2dbc5; */
	margin: 1em;
}

.ui_title {
	font-family: /* 'Open Sans', */ Verdana, sans-serif;
	color: #2A3F54;
	font-weight: 400;
	font-size: 24px;
	line-height:26.4px;
	border-bottom: 1px solid  #2A3F54;
}

.ui_title i {
	font-size: 24px;
}

/* BLOCKS */
.ui_block {
	min-width: 20px;
	background: white;
	border: 0; /* 1px solid #ebebeb;*/
	padding: 1em 1em;
	margin-bottom: 2em;
	box-shadow: 0 4px 6px 0 hsla(0,0%,0%,0.2);
}

.ui_block h3,
.ui_block h3 i {
	font-family: /* 'Open Sans', */ Verdana, sans-serif;
	border-bottom: 2px solid rgb(230,233,237);
	color: rgb(115,135,156);
	font-weight: 400;
	font-size: 16px;
	line-height: 18.7px;
	padding: 0;
	margin: 1em 0 0.5em 0;
}
.ui_block h3:first-child {
	margin: 0.5em 0 0.5em 0;
}

/* 3. TABLE */
.ui_table {
	border: 1px solid black;
	border-collapse: collapse;
	width:100%;
	margin-bottom: 1em;
}
.ui_table th {
	text-align: left;
	background: lightgray;
}
.ui_table td,
.ui_table th {
	border: 1px solid gray;
	padding: 3px 5px;
	font-size: 10pt;
	font-weight: 400;
}

JavaScript

jQuery(document).ready(function() {
$.fn.dataTableExt.oPagination.iFullNumbersShowPages = 3;
$.fn.dataTable.moment('DD/MM/YYYY');
		$("#myTable1").DataTable({	
		"autoWidth": false,
		"destroy": true,
		"order": [[2, 'desc']],
		"pageLength": 15,
		"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
		"pagingType": "full_numbers"
});
});