"Acl Table for Roles and Users"
Bootstrap 4.0.0 Snippet by vabtrix

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <h4>Permissions</h4> <div class="table-responsive"> <table id="mytable" class="table table-bordred table-striped"> <thead> <th>User Tasks</th> <th>Dev</th> <th>Dev Lead</th> <th>QA</th> <th>QA Lead</th> <th>PM</th> <th>Gr PM / VP</th> </thead> <tbody> <tr> <td>Check In</td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> </tr> <tr> <td>Adhoc Build Capability</td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> </tr> <tr> <td>Deployment in different stages</td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> </tr> <tr> <td>Approve Dev Gate</td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> </tr> <tr> <td>Approve QA Gate</td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> </tr> <tr> <td>Approve staging Gate / UAT Gate</td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> </tr> <tr> <td>View Dashboard</td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> </tr> <tr> <td>Setup Nightly Build</td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/cross.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> <td> <img src="http://adb.teletango.com/dev/Aurigo/Dashboard/img/icons/tick_disabled.png" class="permission-toggle" data-aco_id="42" data-aro_id="92" alt=""> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> <h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4> </div> <div class="modal-body"> <div class="form-group"> <input class="form-control " type="text" placeholder="Mohsin"> </div> <div class="form-group"> <input class="form-control " type="text" placeholder="Irshad"> </div> <div class="form-group"> <textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea> </div> </div> <div class="modal-footer "> <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4> </div> <div class="modal-body"> <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div> </div> <div class="modal-footer "> <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div>
$(document).ready(function(){ $("#mytable #checkall").click(function () { if ($("#mytable #checkall").is(':checked')) { $("#mytable input[type=checkbox]").each(function () { $(this).prop("checked", true); }); } else { $("#mytable input[type=checkbox]").each(function () { $(this).prop("checked", false); }); } }); $("[data-toggle=tooltip]").tooltip(); });

Related: See More


Questions / Comments: