JSFiddle - React, Tailwind, and code Playground

HTML

<table class="test" cellpadding="10" cellspacing="0" align="center" bgcolor="#9CDEEC" border="0" style="margin-bottom: 16px;border-radius: 4px;border: 1px solid #555555;">
    <!-- Transactions table -->
    <tbody>
        <tr>

            <td>
                <input style="width: 90px;" type="text" class="datepicker" name="date[]" required="" value="01/09/1970">
            </td>

            <td>
                <input type="text" name="payee[]" required="" value="Hateful!">
            </td>


            <td rowspan="2" align="left" valign="top">
                <a title="Memo: They're customer service is astounding.">
                    <textarea rows="3" style="text-align: left; border: 1px solid #AAAAAA; width: 200px; background-color: #FFFFFF; padding: 3px;" name="memo[]">They're customer service is astounding.</textarea>
                </a>
            </td>
            <td>
                <select name="reconciled[]">
                    <option value="R" selected="selected">R</option>
                    <option value=""></option>
                    <option value="C">C</option>
                    <option value="R">R</option>
                </select>
            </td>

            <td>
                <input style="width: 100px; text-align: right;" type="number" step="0.01" name="deposit[]" size="4" min="0" max="100000000" value="">
            </td>
            <td>
                <input style="width: 100px; text-align: right;" type="number" step="0.01" name="withdrawal[]" size="4" min="0" max="100000000" value="37.00">
            </td>
            <input type="hidden" name="record_id[]" value="95">
            <td rowspan="2" align="center" valign="middle">
                <input type="checkbox" name="delete_record[]" value="95">
            </td>
        </tr>

        <tr>
            <td>
                <input style="width: 60px;" placeholder="Check #" type="number" step="1" min="0" max="1000000000" name="check_number[]" value="110">
    ...

CSS

.halfOpacity {
    opacity: 0.5;
}

JavaScript

var tables = document.querySelectorAll('input[name="delete_record[]');
for(var i = 0, l = tables.length; i < l; i++) {
    tables[i].addEventListener('click', function() {
        var d = this.parentNode.parentNode.parentNode; // the table
        d.classList.toggle('halfOpacity', this.checked);
    });
}