JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<script src="http://www.excelisys.biz/js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
                    <div class="zoekResulaatOverzicht">
                        <table class="tableSoorter clickable usersBeheer">
                            <thead>
                                <tr>
                                    <th colspan="2">Gebruikers</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="noIndent"><input value="1" type="radio" name="beheerrollen" data-rolbeheerder="true" data-rolfiatteerder="true" data-rolraadpleger="true" data-roljuniorbeheerder="true" class="childCheckBox"></td>
                                    <td class="test">Jan jansen</td>
                                </tr>
                                <tr>
                                    <td class="noIndent"><input value="2" type="radio" name="beheerrollen" data-rolbeheerder="false" data-rolfiatteerder="false" data-rolraadpleger="false" data-roljuniorbeheerder="true" class="childCheckBox"></td>
                                    <td>Freek</td>
                                </tr>
                                <tr>
                                    <td class="noIndent"><input value="3" type="radio" name="beheerrollen" data-rolbeheerder="false" data-rolfiatteerder="false" data-rolraadpleger="true" data-roljuniorbeheerder="true" class="childCheckBox"></td>
                                    <td>Pieter</td>
                                </tr>
                                <tr>
                                    <td class="noIndent"><input value="4" type="radio" name="beheerrollen" data-rolbeheerder="false" data-rolfiatteerder="false" data-rolraadpleger="false" data-roljuniorbeheerder="true" class="childCheckBox"></td>
                         ...

CSS

.tableSoorter a.fiatterenTooltip,
.linkBlock span.verfijnResultatenTooltip,
.contentTabsTables span.verfijnResultatenTooltip {
    background:url("../images/verfijnResultatenTooltip.png") no-repeat transparent;
    height:20px;
    width:20px;
    margin-left:5px;
    display:inline-block;
    vertical-align:middle;
}

.tableSoorterDivider{background:#E5ECEE;}

.tableSoorter thead a.active,
.tableSoorter thead a.inactive:hover{
    background:url("../images/tableSoorterActive.png") no-repeat scroll 0 0 transparent;
    color: #007491;
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    padding-left: 15px;
    vertical-align: middle;
    text-decoration:underline;
}

.tableSoorter thead span{
    color: #007491;
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    padding-left: 5px;
    vertical-align: middle;
    font-weight:500;

}

.tableSoorter tbody tr.filterdOut{color: #A9A9A9!important;}
.tableSoorter tbody tr.filterdOut:hover,
.tableSoorter.clickable tbody tr.filterdOut:hover,
.tableSoorter tbody tr.filterdOut:hover td,
.tableSoorter.clickable tbody tr.filterdOut:hover td{background:none; cursor:default;}

.tableSoorter tbody tr{color:#000;}

.tableSoorter thead a.inactive {
    background: url("../images/tableSoorterInactive.png") no-repeat scroll 0 0 transparent;
    color: #007491;
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    padding-left: 15px;
    vertical-align: middle;
}

.tableSoorter thead th,.tableSoorter tfoot th,.tableSoorter thead,.tableSoorter tfoot{
    background: #e5ecee;
    color:#007491;
    text-align:left;
    line-height:22px;
}

    .tableSoorter a{color: #FF9900;text-decoration: none; font-weight:500;}
    .tableSoorter a:hover{ color: #007491;text-decoration: none;}
/* table spacing */
    .tableSoorter thead th, .tableSoorter tfoot th, .tableSoorter tbody td{}
    .tableSoorter thead th, .tableSoorter tfoot th {white-space: nowrap;}
    .tableSoorter tbody td...

JavaScript

$('.usersBeheer tr').click(function(event){
       $(this).find('input:first').attr('checked', true);
        checkChanged($(this).find('input:first'));
    });

    $('.childCheckBox, .parentCheckBox').click(function(){
        if($(this).is(':not:checked')) {
            $(this).attr('checked', true);
        } else {
            $(this).attr('checked', false);
            $(this).attr('checked', false);
        }
    });

    $(".usersBeheer").delegate("tbody tr", "click", function(){
        $(".UserSelected").removeClass("UserSelected");
        $(this).closest("tr").addClass("UserSelected");
    });


var checkChanged = function(thisData){

    if($('#rolJuniorBeheerder').data('originalvalue') != $('#rolJuniorBeheerder').is(':checked') ){
//        event.preventDefault();
        $( ".dialogConfirm" ).dialog({
            autoOpen: true,show: "fade",hide: "fade", modal: true,
            resizable: false,draggable: false,width: 710,bgiframe: true,
            buttons: {
                "Nee": function() {
                    $( this ).dialog( "close" );

                    var currentSelectedVal = $('.usersBeheer').data('curentSelected');
                    console.log(currentSelectedVal,'currentSelectedVal');
                    $('input [val='+currentSelectedVal+']').attr('checked', true);
                },
                "Ja": function() {
                    $( this ).dialog( "close" );
                    UserRolSetSelected(thisData);
                }
            }
        });

        $(".ui-dialog-buttonset .ui-button .ui-button-text").addClass("cufont");
        $(".ui-dialog-titlebar span").addClass("cufont");
        Cufon.replace('.cufont');

    }else{
    console.log(thisData);
    UserRolSetSelected(thisData);
    }

}

    var UserRolSetSelected = function(thisData){
        thisData.attr('checked', true);
            console.log(thisData,'sdfdsf');
        $('.usersBeheer').data('curentSelected',thisData.val());
       ...