lucidAuth/public/misc/script.manage.js

$(document).ready(function(){
    // Initialize the editable-table functionality
    $('#usertable').editableTableWidget();

    $('#usertable button.delete').click(function() {
        $(this).closest('tr').addClass('removed');
    });

    $('#btnnewuser').click(function() {
        // Create a new user; generate pseudo-random username
        var newUser = 'User' + String(Math.floor(Math.random() * Math.floor(9999))).padStart(4, '0');

        // Add new user to the interface
        //   (new `<tr>` in `<table id="usertable">`)
        $('#usertable tbody').append($('<tr>', {class: 'new'})
            .append($('<td>', {
                text: newUser
            }))
            .append($('<td>', {
                text: 'User'
            }))
            .append($('<td>', {
                class: 'immutable',
                html: '<button class="bttn-simple bttn-xs bttn-primary disabled" data-translation="button_sessions" disabled="true">' +
                    locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_sessions'] + '</button>&nbsp;' +
                    '<button class="bttn-simple bttn-xs bttn-primary delete" data-translation="button_delete">' +
                    locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_delete'] +
                    '</button>'
            }))
        );
        // Call `editableTableWidget()` again to include the newly added `<tr>`
        //   To prevent recreating multiple new editors; reference the already existing `<input>`
        $('#usertable').editableTableWidget({editor: $('#editor')});
        // Add eventhandlers to buttons of newly added `<tr>`
        $('#usertable .new button.delete').unbind().click(function() {
            $(this).closest('tr').remove();
        });
    });

    $('#btnsave').click(function() {
        var newEntries = [];
        $('#usertable .new').each(function() {
            newEntries.push({
                'userName': $(this).find('td:nth-child(1)').text(),
                'roleName': $(this).find('td:nth-child(2)').text()
            });
        });
        var removedEntries = [];
        $('#usertable .removed').each(function() {
            removedEntries.push({
                'userId':   $(this).find('td:nth-child(1)').data('userid'),
                'userName': $(this).find('td:nth-child(1)').text(),
                'roleName': $(this).find('td:nth-child(2)').text()
            });
        });

console.log({'new': newEntries, 'removed': removedEntries});

/*        $.get("psworker.php", {
			do: "mutate",
			mutations: {
				new: newEntries,
				removed: removedEntries
			}
		})*/
    });

    $('#btncancel').click(function() {
        window.location.reload();
    });

    $('#linklogout').click(function() {
        console.log('Logging out!');
    });

   	if (localStorage.getItem('theme') !== null) {
		$('#theme').addClass(localStorage.getItem('theme'));
	}

	$('.logo .sub').click(function(event) {
		var classes = ["tablecloth", "weave", "madras", "tartan", "seigaiha"];

		if (event.ctrlKey) {
			var selectedTheme = classes[~~(Math.random()*classes.length)];

			$('#theme').removeClass(classes.join(' ')).addClass(selectedTheme);
			localStorage.setItem('theme', selectedTheme);
		}
		if (event.altKey) {
			$('#theme').removeClass(classes.join(' '));
			localStorage.removeItem('theme');
		}
	});

});