在表的每一行添加类

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>我想要实现的是，当我选择所有复选框并单击一个按钮时，我想删除“已读”类并在勾选的复选框所在的每一行中添加“未读”类。你能告诉我一个例子，我如何为表格中勾选复选框的每一行添加类？