JSFiddle - React, Tailwind, and code Playground

by srhcan

HTML

<table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0" style="font-family: verdana; font-size: 10px;">
    <thead>
        <tr id="chkrow">
            <th>
                <input type="checkbox" id="checkall" />
            </th>
            <th>Sr.</th>
            <th style="text-align: left;">First Name</th>
            <th style="text-align: left;">Last Name</th>
            <th>Country</th>
            <th>Marital Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align: center;">
                <input type="checkbox" value="1" />
            </td>
            <td style="text-align: center;">1</td>
            <td style="text-align: left;">Adeel</td>
            <td style="text-align: left;">Fakhar</td>
            <td style="text-align: center;">Pakistan</td>
            <td style="text-align: center;">Single</td>
        </tr>
        <tr>
            <td style="text-align: center;">
                <input type="checkbox" value="2" />
            </td>
            <td style="text-align: center;">2</td>
            <td style="text-align: left;">Omer</td>
            <td style="text-align: left;">Fakhar</td>
            <td style="text-align: center;">Pakistan</td>
            <td style="text-align: center;">Single</td>
        </tr>
        <tr>
            <td style="text-align: center;">
                <input type="checkbox" value="3" />
            </td>
            <td style="text-align: center;">3</td>
            <td style="text-align: left;">Umer</td>
            <td style="text-align: left;">Mukhtar</td>
            <td style="text-align: center;">Pakistan</td>
            <td style="text-align: center;">Single</td>
        </tr>
        <tr>
            <td style="text-align: center;">
                <input type="checkbox" value="4" />
            </td>
            <td style="text-align: center;">4</td>
            <td style="text-align: left;">Mark</td>
            <td...

JavaScript

$(document).ready(function () {
    var flag = false;
    var flag2 = false;
    $("#checkall").click(function (event) {
        $('input:checkbox:not(#checkall)').attr('checked', this.checked);
        if ($(this).attr("checked")) {
            $("#tblDisplay").find('tr:not(#chkrow)').each(function () {
                $(this).css("background-color", "#FC9A01");
            });
        } else {
            $("#tblDisplay").find('tr:not(#chkrow)').each(function () {
                $(this).css("background-color", "#FFF");
            });
        }
        flag2 = true;
    });

    $('input:checkbox:not(#checkall)').click(function (event) {
        if ($("#checkall").attr('checked') && !this.checked) {
            $("#checkall").attr('checked', false);
            $(this).closest('tr').css("background-color", "#ffffff");
        }
        if (!$("#checkall").attr('checked') && this.checked) {
            if ($('input:checkbox:not(#checkall)').filter(":not(:checked)").length === 0) {
                $("#checkall").attr('checked', true);
            }
        }
        if (this.checked) {
            $(this).closest('tr').css("background-color", "#FC9A01");
            flag = true;
        }
        if (!this.checked) {
            $(this).closest('tr').css("background-color", "#ffffff");
            flag = true;
        }
    });

    $('tr').click(function () {

        if (!flag) {
            var checkbox = $(this).find('td:first').find('input');
            if (checkbox.is(':checked')) {
                checkbox.attr('checked', false);
                checkbox.closest('tr').css("background-color", "#FFF");
            } else {
                checkbox.attr('checked', true);
                checkbox.closest('tr').css("background-color", "#FC9A01");
            }
        }
        flag = false;
    });
    $('tr#chkrow').click(function () {
        if (!flag2) {
            var checkbox = $(this).find('th:first').find('input');
            if...