在表的每一行添加类

Question

我正在处理我的代码，因为我有表格中的复选框列表。我在每行添加类时遇到问题，因为当我选择所有复选框并单击按钮时，它只会在一行中添加一个类。

这是复选框：

<tr class="read" data-id="236'" data-url="TTNsN1UxWXh5LzYwUjZaSlR1Qk4xZz09" data-sort="1556928960">

            <td class="inbox-small-cells">

                <div id="mail_checkbox" name="mail_checkbox">

                    <input type="checkbox" id="mail_checkbox1" name="mail_checkbox1" class="mail-check" unchecked="">

                </div>

            </td>

            <td class="inbox-small-cells"><i class="fa fa-star"></i></td>

            <td class="view-message dont-show">

                <div id="mail_check">Rob <[e-mail]></[e-mail]></div>

            </td>

            <td class="view-message">

                <div id="mail_check">Hey!</div>

            </td>

            <td class="view-message inbox-small-cells">

                <div id="mail_check"></div>

            </td>

            <td class="view-message text-right">

                <div id="mail_check">04 May</div>

            </td>

        </tr>

<tr class="read" data-id="235'" data-url="U21hT0hpemZRUWlwUmN3amVjMUJzQT09" data-sort="1556479689">

            <td class="inbox-small-cells">

                <div id="mail_checkbox" name="mail_checkbox">

                    <input type="checkbox" id="mail_checkbox1" name="mail_checkbox1" class="mail-check" unchecked="">

                </div>

            </td>

            <td class="inbox-small-cells"><i class="fa fa-star"></i></td>

            <td class="view-message dont-show">

                <div id="mail_check">Shibbir <[e-mail]></[e-mail]></div>

            </td>

            <td class="view-message">

                <div id="mail_check">Image in body and attachement</div>

            </td>

            <td class="view-message inbox-small-cells">

                <div id="mail_check"><i class="fa fa-paperclip"></i></div>

我想要实现的是，当我选择所有复选框并单击一个按钮时，我想删除“已读”类并在勾选的复选框所在的每一行中添加“未读”类。

你能告诉我一个例子，我如何为表格中勾选复选框的每一行添加类？