JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<table>
    <tr>
        <td></td>
        <td></td>
        <td><select name="Select1">
        <option></option>
        <option>Approved</option>
        <option>Pending</option>
        <option>Disapproved</option>
        </select></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td><select name="Select2">
        <option></option>
        <option>Approved</option>
        <option>Pending</option>
        <option>Disapproved</option>
        </select></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td><select name="Select3">
        <option></option>
        <option>Approved</option>
        <option>Pending</option>
        <option>Disapproved</option>
        </select></td>
    </tr>
</table>

CSS

table,td {
    border:1px solid #999;
}

td {
    width:150px;
}

JavaScript

var color = ['none', 'green', 'yellow', 'red'];
$('select').change(function() {
    $(this).parents('tr').css('background', color[$(':selected', this).index()]);
});