JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://olance.github.io/jQuery-switchButton/jquery.switchButton.js"></script>
<div>
    <table border="1">
        <tr id="1">
            <td>mmmmmm</td>
            <td class="center">
                <div class="globalswitch" property="rGlobalId">
                    <input type="checkbox" value="1" checked>
                </div>
            </td>
        </tr>
        <tr id="2">
            <td>kkkkk</td>
            <td class="center">
                <div class="globalswitch" property="rGlobalId">
                    <input type="checkbox" value="1" checked>
                </div>
            </td>
        </tr>
    </table>
</div>

CSS

.switch-button-label {
    float: left;
    font-size: 10pt;
    cursor: pointer;
}
.switch-button-label.off {
    color: #adadad;
}
.switch-button-label.on {
    color: #0088CC;
}
.switch-button-background {
    float: left;
    position: relative;
    background: #ccc;
    border: 1px solid #aaa;
    margin: 1px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
}
.switch-button-button {
    position: absolute;
    left: -1px;
    top : -1px;
    background: #FAFAFA;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

JavaScript

var data = {
    "agencies": {
        "1": {
            assignedAgencies: [
                "agency1",
                "agency2",
                "agency5"],
            restOfAgencies: [
                "agency3",
                "agency4",
                "agency6"],
            global: false
        },
            "2": {
            assignedAgencies: [
                "agency6",
                "agency5"],
            restOfAgencies: [
                "agency1",
                "agency2",
                "agency3",
                "agency4"],
            global: true
        }

    }
}

    function constructAgenciesData() {
        $.each(data.agencies, function (id, row) {
            console.log(id, row);
            $("#" + id).data("assignedAgencies", row.assignedAgencies)
                .data("restOfAgencies", row.restOfAgencies).data("global", row.global);
        })
        
         $(".globalswitch").each(function () {
        var row = $(this).closest("tr")
        console.log('j',this,row,row.data("global"))
        $(this).switchButton({
            'checked': row.data("global")
        }).change(function () {
            var id = this.id;
            var checked = this.checked;
            var Id = $(this).data('Id');
            console.log(Id);
            console.log(id, checked);
        })
    })
        
    }


$(constructAgenciesData);

$(function () {
    console.log($("#1").data("assignedAgencies"))

   
})