JQuery - 在表模板中切换 <TR>

Posted 2023-02-24

【中文标题】JQuery - 在表模板中切换 <TR>

【英文标题】：JQuery - Toggle <TR> in table template

【发布时间】：2016-10-03 16:07:18

【问题描述】：

我正在使用“不显示”，我想在点击引导图标后显示它。

代码如下：

模板：

<a href="#" class="toggler" data-prod-cat="order.cartId.id"><span class="glyphicon glyphicon-th-list" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="% trans 'show detail' %"></span></a>
            </td>
        </tr>
        <tr class="catorder.cartId.id" style="display:none"><td></td><td colspan="5">

                        % for detailOrder in detailOrders %
                            % if detailOrder.cartId.id == order.cartId.id %
                                <li>detailOrder.quantity detailOrder.unit de detailOrder.productId.name pour entreprise.currency.symbol detailOrder.totalPrice
                            % endif %
                        % endfor %
                        <br><u>Livraison</u> : order.deliveryInstruction.instructions|truncatechars:60

        </td></tr>
        % endfor %

javascript：

<script type="text/javascript">
$(document).ready(function()
$(".toggler").click(function(e)
    e.preventDefault();
    $('.cat'+$(this).attr('data-prod-cat')).toggle();
);
);

我的控制台上没有错误，所以我对寻找解决方案有点迷茫。

感谢您的帮助，祝您有愉快的一天:)

【问题讨论】：

您能否通过检查您的代码来确保输出此 order.cartId.id 与 data-prod-cat="order.cartId.id" 和 1234562 相同="catorder.cartId.id" ？像 data-prod-cat="1" 和 class="cat1" ？如果是，那么您的代码将起作用。

【参考方案1】：

试试这个：

$(document).ready(function()
 
  $(".toggler").click(function()
     if($('.cat').css('display') === 'none')
       $('.cat').css('display', 'block');
    else
       $('.cat').css('display', 'none');
      
  );
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<input type="button" class="toggler" value="Toggle"/>

<table>
<tr class="cat" style="display:none;">
     <td>Conlumn 1</td>
      <td colspan="5">Conlumn 2</td>
</tr>
  
  </table>

我希望这会有所帮助！

【讨论】：

我会根据我的代码调整它。如果我有问题，我会告诉你，但 sn-p 显示了我想要的。问题是模板的复杂性^^

如果我的回答有帮助，如果你选择这个答案，我会很高兴......或者如果你标记这个答案是有用的！谢谢！