jQuery addClass example

Change class name on click in jQuery

by ibroom

HTML

<!doctype html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		
		<title>DataTables Editor - test</title>

		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/moment-2.18.1/dt-1.10.20/af-2.3.4/b-1.6.1/b-html5-1.6.1/fh-3.1.6/kt-2.5.1/r-2.2.3/rr-1.2.6/sp-1.0.1/sl-1.3.1/datatables.min.css">
		<link rel="stylesheet" type="text/css" href="css/generator-base.css">
		<link rel="stylesheet" type="text/css" href="css/editor.bootstrap.min.css">

		<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/moment-2.18.1/dt-1.10.20/af-2.3.4/b-1.6.1/b-html5-1.6.1/fh-3.1.6/kt-2.5.1/r-2.2.3/rr-1.2.6/sp-1.0.1/sl-1.3.1/datatables.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/editor.bootstrap.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/table.test.js"></script>
	</head>
	<body class="bootstrap">
		<div class="container">

			<h1>
				DataTables Editor <span>test</span>
			</h1>
			
			<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="test" width="100%">
				<thead>
					<tr>
						<th>Family member</th>
						<th>Date</th>
						<th>Start time</th>
						<th>End time</th>
						<th>Type</th>
						<th>Location</th>
						<th>Description</th>
					</tr>
				</thead>
			</table>

		</div>
	</body>
</html>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

/*
 * Editor client script for DB table test
 * Created by http://editor.datatables.net/generator
 */

(function($){

$(document).ready(function() {
	var editor = new $.fn.dataTable.Editor( {
		ajax: 'php/table.test.php',
		table: '#test',
		fields: [
			{
				"label": "Family member:",
				"name": "family_member",
				"type": "select",
				"options": [
					"John Smith",
					"Mary Smith",
					"Max Smith"
				]
			},
			{
				"label": "Date:",
				"name": "date",
				"type": "datetime",
				"format": "ddd, D MMM YY"
			},
			{
				"label": "Start time:",
				"name": "start_time",
				"type": "datetime",
				"format": "HH:mm"
			},
			{
				"label": "End time:",
				"name": "end_time"
			},
			{
				"label": "Type:",
				"name": "type",
				"type": "select",
				"options": [
					"Work",
					"Personal"
				]
			},
			{
				"label": "Location:",
				"name": "location",
				"type": "select",
				"options": [
					"Lulsgate",
					"Dodington",
					"Queens In transit"
				]
			},
			{
				"label": "Description:",
				"name": "description"
			}
		]
	} );

	var table = $('#test').DataTable( {
		ajax: 'php/table.test.php',
		columns: [
			{
				"data": "family_member"
			},
			{
				"data": "date"
			},
			{
				"data": "start_time"
			},
			{
				"data": "end_time"
			},
			{
				"data": "type"
			},
			{
				"data": "location"
			},
			{
				"data": "description"
			}
		],
		select: true,
		lengthChange: false
	} );

	new $.fn.dataTable.Buttons( table, [
		{ extend: "create", editor: editor },
		{ extend: "edit",   editor: editor },
		{ extend: "remove", editor: editor }
	] );

	table.buttons().container()
		.appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
} );

}(jQuery));