JSFiddle - React, Tailwind, and code Playground

by rapsac

HTML

<table class="record_table">
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
        <td>
            <select class="carSelect" name="cars">
                <option value="volvo">Volvo XC90</option>
                <option value="saab">Saab 95</option>
                <option value="mercedes">Mercedes SLK</option>
                <option value="audi">Audi TT</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
        <td>
            <select class="carSelect" name="cars">
                <option value="volvo">Volvo XC90</option>
                <option value="saab">Saab 95</option>
                <option value="mercedes">Mercedes SLK</option>
                <option value="audi">Audi TT</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
        <td>
            <select class="carSelect" name="cars">
                <option value="volvo">Volvo XC90</option>
                <option value="saab">Saab 95</option>
                <option value="mercedes">Mercedes SLK</option>
                <option value="audi">Audi TT</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
        <td>
            <select class="carSelect" name="cars">
                <option value="volvo">Volvo XC90</option>
                <option value="saab">Saab 95</option>
                <option value="mercedes">Mercedes SLK</option>
                <option value="audi">Audi TT</option>
            </select>
        </td>
    </tr>
</table>

CSS

.record_table {
    width: 100%;
    border-collapse: collapse;
}
.record_table tr:hover {
    background: #eee;
}
.record_table td {
    border: 1px solid #eee;
}
.highlight_row {
    text-decoration: line-through;
    color: #BA3838;
}

JavaScript

$(document).ready(function () {
    $('.record_table tr').click(function (event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }
    });

    $("input[type='checkbox']").change(function (e) {
        if ($(this).is(":checked")) {
            var row = $(this).closest('tr');
            row.addClass("highlight_row");
            //row.find('td select.carSelect').find("option[value=saab]").attr("selected", true);
             row.find("td select.carSelect option[value=saab]").attr("selected", true);
        } else {
            $(this).closest('tr').removeClass("highlight_row");
        }
    });
});