JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<table id="gdRows" style="color:Black;background-color:LightGoldenrodYellow;border-color:Tan;border-width:1px;border-style:solid;font-family:Arial;font-size:Small;width:80%;border-collapse:collapse;">
        <tr align="left" style="background-color:Tan;font-weight:bold;">
            <th scope="col"> </th><th scope="col">ID</th><th scope="col">Product Name</th><th scope="col">Quantity</th><th scope="col">Price</th>
        </tr><tr align="left">
            <td>
                        <input id="gdRows_ctl02_chkDelete" type="checkbox" name="gdRows$ctl02$chkDelete" />
                    </td><td>1</td><td>Mouse</td><td>10</td><td>100</td>
        </tr><tr align="left" style="background-color:PaleGoldenrod;">
            <td>
                        <input id="gdRows_ctl03_chkDelete" type="checkbox" name="gdRows$ctl03$chkDelete" />
                    </td><td>2</td><td>Speaker</td><td>15</td><td>990</td>
        </tr><tr align="left">
            <td>
                        <input id="gdRows_ctl04_chkDelete" type="checkbox" name="gdRows$ctl04$chkDelete" />
                    </td><td>3</td><td>Hard Drive</td><td>35</td><td>3990</td>
        </tr><tr align="left" style="background-color:PaleGoldenrod;">
            <td>
                        <input id="gdRows_ctl05_chkDelete" type="checkbox" name="gdRows$ctl05$chkDelete" />
                    </td><td>4</td><td>RAM</td><td>22</td><td>399</td>
        </tr><tr align="left">
            <td>
                        <input id="gdRows_ctl06_chkDelete" type="checkbox" name="gdRows$ctl06$chkDelete" />
                    </td><td>5</td><td>Wireless Keyboard</td><td>10</td><td>3500</td>
        </tr><tr align="left" style="background-color:PaleGoldenrod;">
            <td>
                        <input id="gdRows_ctl07_chkDelete" type="checkbox" name="gdRows$ctl07$chkDelete" />
                    </td><td>6</td><td>Wi-Fi Router</td><td>1</td><td>3990</td>
        </tr><tr align="left">
            <td>
         ...

CSS

body
{
    padding:10px;
}

td
{
    padding:6px;
}
th
{
    padding:10px;
    font-weight:bold;
}

JavaScript

$(document).ready(function() {
    $('#gdRows').find('input:checkbox[id$="chkDelete"]').click(function() {
        var isChecked = $(this).prop("checked");
        var $selectedRow = $(this).parent("td").parent("tr");
        var selectedIndex = $selectedRow[0].rowIndex;
        var sColor = '';

        if (selectedIndex % 2 == 0) 
            sColor = 'PaleGoldenrod';
        else 
            sColor = 'LightGoldenrodYellow';

        if (isChecked) 
        {
            $selectedRow.css({
                "background-color": "DarkSlateBlue",
                "color": "GhostWhite"
            });
        }
        else 
        {
            $selectedRow.css({
                "background-color": sColor,
                "color": "black"
            });
        }
    });
});