JSFiddle - React, Tailwind, and code Playground

by Jason Davis

HTML

<h2>Matrix style Grid of user permissions for which menu links each user is allowed to view.</h2>
- Mass update user with check/uncheck all permissions per user.<br>
- Indivual check/uncheck per link permissions, per user!<br>
- AJAX saves it all.<br><br><br><hr><br><br>


<table>
        <tbody>
            <tr class="table_header">
                <th>&nbsp;</th>
                <th align="center">https://google.com/-1</th>
                <th align="center">https://google.com/-2</th>
                <th align="center">https://google.com/-3</th>
                <th align="center">https://google.com/-4</th>
                <th align="center">https://google.com/-5</th>
            </tr>

            <tr>
                <td><input class="checkall" type="checkbox"> user 1-1</td>
                <td align="center">user 1<input checked="checked" class=
                "flipswitch" name="0" type="checkbox" value="1">1</td>
                <td align="center">user 1<input checked="checked" class=
                "flipswitch" name="1" type="checkbox" value="2">1</td>
                <td align="center">user 1<input checked="checked" class=
                "flipswitch" name="2" type="checkbox" value="3">1</td>
                <td align="center">user 1<input checked="checked" class=
                "flipswitch" name="3" type="checkbox" value="4">1</td>
                <td align="center">user 1<input checked="checked" class=
                "flipswitch" name="4" type="checkbox" value="5">1</td>
            </tr>

            <tr>
                <td><input class="checkall" type="checkbox"> user 2-2</td>
                <td align="center">user 2<input checked="checked" class=
                "flipswitch" name="5" type="checkbox" value="6">2</td>
                <td align="center">user 2<input checked="checked" class=
                "flipswitch" name="6" type="checkbox" value="7">2</td>
                <td align="center">user 2<input checked="checked" class=
               ...

CSS

table {  border: 1px solid #000;  }
th {  background-color: #CCC;  }
td {  border: 1px solid #CCC;	}

JavaScript

$(document).ready(function() {

    $(".checkall").click(function(){
        $(this).parents('tr').find(':checkbox').prop('checked', this.checked).change();
    });


    $(".flipswitch").change(function () {
        var flip = $(this).closest('td');
        //alert("perm_id="+this.value+"&permissions=" + this.checked);
        $.ajax({
            type: 'post',
            url: '/echo/html/',
            data: "perm_id="+ this.value + "&permission=" + this.checked,
            success: function() {
             	flip.effect("highlight", {color:"#12D812"}, 2000)
            }
        });
    });

});