JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<script src="http://olance.github.io/jQuery-switchButton/jquery.switchButton.js"></script>
    <table id="ListTable" class="display" border="1" >         
        <thead>
            <tr>
               
                <th title="Rename_name" id="envName" class="header"> <a href="#">Name</a></th>
                <th title="Rename_tag" id="env" class="header"> <a href="#">Env</a></th>
                <th title="Description" id="dst" class="header"> <a href="#">Desc</a></th>
                <th title="Created_date" id="type" class="header"> <a href="#">Type Name</a></th>
                <th title="Updated_by" id="transInterface" class="header">Details</a></th>
               
                <th title="assign" class="header"> <a href="#">Assign to</a></th>
                <th title="assign" class="header"> <a href="#">Global OFF/ON</a></th>
                <th title="Edit" class="header">
                    Edit
                </th>
                <th title="Delete" class="header">
                    Enable/Disable
                </th>
                <th title="Disabled" id="disabled" class="header"> <a href="#">Disabled</a></th>
            </tr>
        </thead>
        <tbody>
        
                   
                <tr id='19'
                    data-rrname='MAJIDRULE'
                    data-env='QA'
                    data-rrshort='short desc QA -- BAT'
                    data-rrlong='xxzxzxzx
dssdsdsdsd
sdsdsdsd

update'
                    data-rrtid='17'
                    data-rrtname='BAT'
                    data-rrdata='data test. qa data'
                    >   
                    
                    <td class="center">MAJIDRULE</td>
                    <td class="center">QA</td>
                    <td class="center">short desc QA -- BAT</td>
                    <td class="center">BAT</td>
                   
                   <td class="center"> 
                    
                      <a...

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

$(document).ready(function () {
     $(".globalswitch").each(function () {
        $(this).switchButton({
            checked: $(this).data('gswitch') 
        });

    })

})