最后一列不应该打开可折叠的表格

Question

我试图从表行的最后一个 td 中删除表行类的点击效果，它有一个动作，并尝试使用 jQuery 来实现。 这是我的桌子：

你可以看到，当我点击带有动作的

td

时，它会显示动作菜单以及隐藏的表格行，但我只想显示动作菜单。其余

td

元素应在单击时显示隐藏的表格行。

<div class="table-responsive expended-table">
                                    <table id="to-do" class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th class="text-left">Team Name <i class="fa fa-sort"
                                                        aria-hidden="true"></i> </th>
                                                <th class="text-left">Team Leader <i class="fa fa-sort"
                                                        aria-hidden="true"></i> </th>
                                                <th class="text-left">Geography <i class="fa fa-sort"
                                                        aria-hidden="true"></i> </th>
                                                <th>Region <i class="fa fa-sort" aria-hidden="true"></i></th>
                                                <th>Type <i class="fa fa-sort" aria-hidden="true"></i></th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="border-bottom order_extra_info">
                                                
                                                <td><i class="fa fa-angle-right "></i></td>
                                                <td>U.S. East Region</td>
                                                <td class="project-people text-left"><a data-trigger="hover click"
                                                        class="popover-toggle text-primary" href="#"><img alt="image"
                                                            class="rounded-circle" src="img/a2.jpg">
                                                        <span>Simen Jhones</span></a>
                                                </td>
                                                <td>LATAM</td>
                                                <td>East</td>
                                                <td>Commercial</span>
                                                </td>
                                                
                                                <td id="stop-action">
                                                    <div>
                                                        <a data-toggle="dropdown" class="">
                                                            <i class="fa fa-ellipsis-h"></i>
                                                        </a>
                                                        <ul class="dropdown-menu">
                                                            <li><a class="dropdown-item" data-toggle="modal"
                                                                    data-target="#edit-team">
                                                                    <i class="fa fa-pencil"></i>
                                                                    Edit Team</a>
                                                            </li>
                                                            <li><a class="dropdown-item" href="#">
                                                                    <i class="fa fa-trash"></i>
                                                                    Remove Team</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="order_extra_infos" id="1545">
                                                <td colspan="15">
                                                    <table class="table table-bordered table-hover">
                                                        <thead>
                                                            <tr>
                                                                <td class="text-left" width="25%">Name</td>
                                                                <td class="text-left" width="25%">Email</td>
                                                                <td class="text-left" width="50%">Role
                                                                </td>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td class="text-left">Simen Jhones
                                                                    <br>Albert John
                                                                    <br>Brian Carter
                                                                    <br>Harriet Blu
                                                                    <br> Harry Nel
                                                                    <br>David Warner
                                                                </td>
                                                                <td class="text-left">[email protected]
                                                                    <br>[email protected]
                                                                    <br>[email protected]
                                                                    <br>[email protected]
                                                                    <br>[email protected]
                                                                    <br>[email protected]
                                                                </td>
                                                                <td class="text-left">Coach
                                                                    <br>Sales Rep
                                                                    <br>Sales Rep
                                                                    <br>Sales Rep
                                                                    <br>Coach
                                                                    <br>Coach
                                                                </td>
                                                            </tr>
                                                            
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                              </tbody>
                          </table>
                       </div>

下面的方法我都试过了，没有效果

$(".order_extra_info").each(function() {
     $(this).click(function() {
        $(this).next().toggle(".order-extra-infor-shown");
        $(this).find('td > i').toggleClass('fa-angle-right fa-angle-down');
                
       });
   });

如何从最后一个

td

中排除点击处理程序？

Answer 1

如果我正确理解你的问题，你希望你的点击处理程序切换第二个表体行的可见性以应用于第一行中的所有

<td>

元素除了最后一个。

为此，我将修改应用处理程序的选择器以应用于

td

元素而不是整个

tr.order_extra_info

。然后，我们可以使用 :not CSS 伪类 来扩展我们的选择器，使其不匹配最后一个

<td>

元素：

.order_extra_info td:not(:last-child)

.

当然，我们现在需要修改处理程序主体，以便它获得行元素，这将是被单击的

.parent()

的

td

。

$('.order_extra_info td:not(:last-child)').on('click', function () {
  const $row = $(this).parent();
  $row.next().toggle(".order-extra-infor-shown");
  $row.find('td > i').toggleClass('fa-angle-right fa-angle-down');
});

.order_extra_info {
  background: orange;
}

.order_extra_infos {
  display: none;
}

.order-extra-infor-shown {
  display: block;
}

td i.fa {
  background: blue;
  display: inline-block;
  height: 20px;
  width: 20px;
}

td i.fa-angle-down {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive expended-table">
  <table id="to-do" class="table table-hover">
    <thead>
      <tr>
        <th></th>
        <th class="text-left">Team Name <i class="fa fa-sort" aria-hidden="true"></i> </th>
        <th class="text-left">Team Leader <i class="fa fa-sort" aria-hidden="true"></i> </th>
        <th class="text-left">Geography <i class="fa fa-sort" aria-hidden="true"></i> </th>
        <th>Region <i class="fa fa-sort" aria-hidden="true"></i></th>
        <th>Type <i class="fa fa-sort" aria-hidden="true"></i></th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-bottom order_extra_info">

        <td><i class="fa fa-angle-right "></i></td>
        <td>U.S. East Region</td>
        <td class="project-people text-left"><a data-trigger="hover click" class="popover-toggle text-primary" href="#"><img alt="image" class="rounded-circle" src="img/a2.jpg">
            <span>Simen Jhones</span></a>
        </td>
        <td>LATAM</td>
        <td>East</td>
        <td><span>Commercial</span></td>

        <td id="stop-action">
          <div>
            <a data-toggle="dropdown" class="">
              <i class="fa fa-ellipsis-h"></i>
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" data-toggle="modal" data-target="#edit-team">
                  <i class="fa fa-pencil"></i>
                  Edit Team</a>
              </li>
              <li><a class="dropdown-item" href="#">
                  <i class="fa fa-trash"></i>
                  Remove Team</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr class="order_extra_infos" id="1545">
        <td colspan="15">
          <table class="table table-bordered table-hover">
            <thead>
              <tr>
                <td class="text-left" width="25%">Name</td>
                <td class="text-left" width="25%">Email</td>
                <td class="text-left" width="50%">Role
                </td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-left">Simen Jhones
                  <br>Albert John
                  <br>Brian Carter
                  <br>Harriet Blu
                  <br> Harry Nel
                  <br>David Warner
                </td>
                <td class="text-left">[email protected]
                  <br>[email protected]
                  <br>[email protected]
                  <br>[email protected]
                  <br>[email protected]
                  <br>[email protected]
                </td>
                <td class="text-left">Coach
                  <br>Sales Rep
                  <br>Sales Rep
                  <br>Sales Rep
                  <br>Coach
                  <br>Coach
                </td>
              </tr>

            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>