JSFiddle - React, Tailwind, and code Playground

by Justin Voelker

HTML

<table class="table">
    <tbody>
        <tr data-key="102" class="">
            <td style="width: 25px;">
                <div class="checkbox">
                    <input type="checkbox" id="selection_102" name="selection[]" value="102">
                    <label for="selection_102"></label>
                </div>
            </td>
            <td><a href="/yii2basic202/web/index.php?r=testing%2Fview&amp;id=102">Title 102</a>

            </td>
            <td>Body 102</td>
            <td>tag2</td>
        </tr>
        <tr data-key="103">
            <td style="width: 25px;">
                <div class="checkbox">
                    <input type="checkbox" id="selection_103" name="selection[]" value="103">
                    <label for="selection_103"></label>
                </div>
            </td>
            <td><a href="/yii2basic202/web/index.php?r=testing%2Fview&amp;id=103">Title 103</a>

            </td>
            <td>Body 103</td>
            <td>tag8</td>
        </tr>
        <tr data-key="104">
            <td style="width: 25px;">
                <div class="checkbox">
                    <input type="checkbox" id="selection_104" name="selection[]" value="104">
                    <label for="selection_104"></label>
                </div>
            </td>
            <td><a href="/yii2basic202/web/index.php?r=testing%2Fview&amp;id=104">Title 104</a>

            </td>
            <td>Body 104</td>
            <td>tag8</td>
        </tr>
        <tr data-key="105">
            <td style="width: 25px;">
                <div class="checkbox">
                    <input type="checkbox" id="selection_105" name="selection[]" value="105">
                    <label for="selection_105"></label>
                </div>
            </td>
            <td><a href="/yii2basic202/web/index.php?r=testing%2Fview&amp;id=105">Title 105</a>

            </td>
            <td>Body 105</td>
            <td>tag1</td>
        </tr>
    </tbody>
</table>

CSS

table {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

JavaScript

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

    $(':checkbox').click(function (event) {
        console.log(event.shiftKey);
    });
});