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 <myname@example.com></rob@example.com></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 <name2@example.com></creativeartbd@gmail.com></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>

            </td>
            <td class="view-message text-right">
                <div id="mail_check">28 Apr</div>
            </td>
        </tr>


<tr class="read" data-id="234'" data-url="NWpoUGcwK1lIb2tJQWlzR0grQVhEUT09" data-sort="1556479271">
            <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 <name2@example.com></creativeartbd@gmail.com></div>
            </td>
            <td class="view-message">
                <div id="mail_check">checking message body</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">28 Apr</div>
            </td>
        </tr>

我已经尝试过了：

$(document).on('click','#Markasunread',function() {

    alert("you are working on Markasunread now chris");

    $("#mail_checkbox1").each(function() {

        if ($(this).prop('checked') == true) {
            $(".mail-check").prop("checked", false);
            $("#select_all").prop("checked", false);
            $(this).addClass("unread");

        }
    });
});

我也尝试过这个：

$(document).on('click','#Markasunread',function() {


    $("#mail_checkbox1").each(function() {

        if ($(this).prop('checked') == true) {
            $(".mail-check").prop("checked", false);
            $("#select_all").prop("checked", false);
            $(this).closest("tr").addClass("unread");
        }
    });
});

这：

$(document).on('click','#Markasunread',function() {


    $("#mail_checkbox1").each(function() {

        if ($(this).prop('checked') == true) {
            $(".mail-check").prop("checked", false);
            $("#select_all").prop("checked", false);
            $("#mail_checkbox1").closest("tr").addClass("unread");
        }
    });
});

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

能否请您举一个例子，说明如何为选中的复选框所在的表中的每一行添加类？

谢谢。

Answer 1

您没有允许多次使用ID。因此，将ID更改为唯一的ID。同时尝试使用更好的JQuery Selectors。使用"table input:checked"，您将在表格中获得所有选中的输入字段。现在，您可以循环它们以获取父tr并添加unread类。

$('#actionButton').click(event => {
  let inputs = $('table input:checked').toArray();
  inputs.forEach(input => {
    $(input).closest('tr').addClass('unread');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>
  <tbody>
    <tr class="read" data-id="236'" data-url="TTNsN1UxWXh5LzYwUjZaSlR1Qk4xZz09" data-sort="1556928960">
      <td class="inbox-small-cells">
        <div id="1_1" 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="1_2">Rob
          <myname@example.com>
            </rob@example.com>
        </div>
      </td>
      <td class="view-message">
        <div id="1_3">Hey!</div>
      </td>
      <td class="view-message inbox-small-cells">
        <div id="1_4"></div>

      </td>
      <td class="view-message text-right">
        <div id="1_5">04 May</div>
      </td>
    </tr>

    <tr class="read" data-id="235'" data-url="U21hT0hpemZRUWlwUmN3amVjMUJzQT09" data-sort="1556479689">
      <td class="inbox-small-cells">
        <div id="2_1" name="mail_checkbox">
          <input type="checkbox" id="mail_checkbox2" 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="2_2">Shibbir
          <name2@example.com>
            </creativeartbd@gmail.com>
        </div>
      </td>
      <td class="view-message">
        <div id="2_3">Image in body and attachement</div>
      </td>
      <td class="view-message inbox-small-cells">
        <div id="2_4"><i class="fa fa-paperclip"></i></div>

      </td>
      <td class="view-message text-right">
        <div id="2_5">28 Apr</div>
      </td>
    </tr>

    <tr class="read" data-id="234'" data-url="NWpoUGcwK1lIb2tJQWlzR0grQVhEUT09" data-sort="1556479271">
      <td class="inbox-small-cells">
        <div id="3_1" name="mail_checkbox">
          <input type="checkbox" id="mail_checkbox3" 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="3_2">Shibbir
          <name2@example.com>
            </creativeartbd@gmail.com>
        </div>
      </td>
      <td class="view-message">
        <div id="3_3">checking message body</div>
      </td>
      <td class="view-message inbox-small-cells">
        <div id="3_4"></div>

      </td>
      <td class="view-message text-right">
        <div id="3_5">28 Apr</div>
      </td>
    </tr>
  </tbody>
</table>

<input type="button" id="actionButton" value="Change">

在表格的每一行中添加类

1 个答案: