文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >隐藏每个详细信息行中的按钮

问隐藏每个详细信息行中的按钮
EN

Stack Overflow用户
提问于 2019-12-30 10:23:55
回答 3查看 81关注 0票数 1

我有一个向下钻取列表，每行都有一个按钮。如何使用jQuery隐藏这些按钮？

我已经尝试了以下代码，但我无法找到按钮。

代码语言：javascript
复制
$(".s_invoicedtl").closest(".card").find(".btn-default")

下面是包含该按钮的某一行的HTML -

代码语言：javascript
复制
<tr class="ew-table-preview-row">
  <td class="ew-table-last-col ew-table-last-row" colspan="10">
    <!-- preview -->
    <div class="ew-nav-tabs">
      <!-- .ew-nav-tabs -->
      <ul class="nav nav-tabs">
        <li class="nav-item"><a href="#" class="nav-link active" data-toggle="tab" data-table="s_invoicedtl"
            data-url="/s_invoicedtlpreview?t=s_invoice&amp;f=gKD81aAcp3oYWIAnst6HVg" data-target="#131127">s
            invoicedtl&nbsp;<span class="badge badge-info ew-detail-count1">1</span></a></li>
      </ul>
      <div class="tab-content">
        <!-- .tab-content -->
        <div class="tab-pane fade active show" id="131127">
          <div class="card ew-grid s_invoicedtl">
            <!-- .card -->
            <div class="table-responsive card-body ew-grid-middle-panel ew-preview-middle-panel">
              <!-- .table-responsive -->
              <table class="table ew-table ew-preview-table">
                <!-- .table -->
                <thead>
                  <!-- Table header -->
                  <tr class="ew-table-header">

                    <th class="ew-table-header-cell">
                      <div class="ew-pointer" data-sort="Id_item_code" data-sort-order="ASC">
                        <div class="ew-table-header-btn">
                          <span class="ew-table-header-caption">Item</span>
                          <span class="ew-table-header-sort"></span>
                        </div>
                      </div>
                    </th>
                    <th class="ew-table-header-cell">
                      <div class="ew-pointer" data-sort="qty" data-sort-order="ASC">
                        <div class="ew-table-header-btn">
                          <span class="ew-table-header-caption">Qty</span>
                          <span class="ew-table-header-sort"></span>
                        </div>
                      </div>
                    </th>
                    <th class="ew-table-header-cell">
                      <div class="ew-pointer" data-sort="price_unit" data-sort-order="ASC">
                        <div class="ew-table-header-btn">
                          <span class="ew-table-header-caption">Unit Price</span>
                          <span class="ew-table-header-sort"></span>
                        </div>
                      </div>
                    </th>
                    <th class="ew-table-header-cell">
                      <div class="ew-pointer" data-sort="Id_uom" data-sort-order="ASC">
                        <div class="ew-table-header-btn">
                          <span class="ew-table-header-caption">Unit</span>
                          <span class="ew-table-header-sort"></span>
                        </div>
                      </div>
                    </th>
                    <th class="ew-table-header-cell">
                      <div class="ew-pointer" data-sort="Id_taxmaster" data-sort-order="ASC">
                        <div class="ew-table-header-btn">
                          <span class="ew-table-header-caption">Tax</span>
                          <span class="ew-table-header-sort"></span>
                        </div>
                      </div>
                    </th>
                    <th class="ew-table-header-cell">
                      <div class="ew-pointer" data-sort="tax_rate" data-sort-order="ASC">
                        <div class="ew-table-header-btn">
                          <span class="ew-table-header-caption">TxRate</span>
                          <span class="ew-table-header-sort"></span>
                        </div>
                      </div>
                    </th>
                    <th class="ew-table-header-cell">
                      <div class="ew-pointer" data-sort="discount" data-sort-order="ASC">
                        <div class="ew-table-header-btn">
                          <span class="ew-table-header-caption">Discount</span>
                          <span class="ew-table-header-sort"></span>
                        </div>
                      </div>
                    </th>
                    <th class="ew-table-header-cell">
                      <div class="ew-pointer" data-sort="taxamount" data-sort-order="ASC">
                        <div class="ew-table-header-btn">
                          <span class="ew-table-header-caption">Tax</span>
                          <span class="ew-table-header-sort"></span>
                        </div>
                      </div>
                    </th>
                    <th class="ew-table-header-cell ew-table-last-col">
                      <div class="ew-pointer" data-sort="amount" data-sort-order="ASC">
                        <div class="ew-table-header-btn">
                          <span class="ew-table-header-caption">Amount</span>
                          <span class="ew-table-header-sort"></span>
                        </div>
                      </div>
                    </th>

                  </tr>
                </thead>
                <tbody>
                  <!-- Table body -->
                  <tr class="ew-table-row">

                    <td class="ew-table-last-row">
                      <span>SDSCFi1, Stam Duty: Facility Agreement SCF-i.1</span>
                    </td>
                    <td style="text-align: right;" class="ew-table-last-row">
                      <span>5</span>
                    </td>
                    <td style="text-align: right;" class="ew-table-last-row">
                      <span>44,020.00</span>
                    </td>
                    <td class="ew-table-last-row">
                      <span>UNIT</span>
                    </td>
                    <td class="ew-table-last-row">
                      <span>SRG0 </span>
                    </td>
                    <td style="text-align: right;" class="ew-table-last-row">
                      <span>0.00</span>
                    </td>
                    <td style="text-align: justify;" class="ew-table-last-row">
                      <span>0.00</span>
                    </td>
                    <td style="text-align: right;" class="ew-table-last-row">
                      <span>0.00</span>
                    </td>
                    <td style="text-align: right;" class="ew-table-last-col ew-table-last-row">
                      <span>220,100.00</span>
                    </td>

                  </tr>
                </tbody>
              </table><!-- /.table -->
            </div><!-- /.table-responsive -->
            <div class="card-footer ew-grid-lower-panel ew-preview-lower-panel">
              <!-- .card-footer -->
              <div class="ew-preview-other-options">

              </div>
              <div class="clearfix"></div>
            </div><!-- /.card-footer -->
          </div><!-- /.card -->
          <div data-table="s_invoicedtl" data-url="/s_invoicedtlpreview?t=s_invoice&amp;f=gKD81aAcp3oYWIAnst6HVg"
            class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default" title=""
              onclick="window.location='/s_invoicedtllist?showmaster=s_invoice&amp;fk_Id=26'"
              data-original-title="s invoicedtl">
              <i data-phrase="MasterDetailListLink" class="icon-table ew-icon" data-caption="Detail List">
              </i>
            </button>
          </div>
        </div>
      </div><!-- /.tab-content -->
    </div><!-- /.ew-nav-tabs -->
  </td>
</tr>
jquery
closest
EN

回答 3

Stack Overflow用户

发布于 2019-12-30 16:59:53

尝试中的.find()将不起作用，因为当按钮是所选内容的兄弟项时，它将从所选内容向下搜索

为了保持与最初类似的方式，您可以使用next sibling selector ~查找与.s_invoicedt1在同一元素组中的按钮，或者在尝试对按钮执行.find()操作之前使用.parent().find()向上移动DOM

​

代码语言：javascript
复制
let $button = $('.card.s_invoicedtl ~ .btn-group .btn');
// let $button = $('.card.s_invoicedtl').parent().find('.btn-group .btn');

$(document).ready(function () {
  console.log($button.length);
  $button.hide();
})
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<tr class="ew-table-preview-row">
    <td class="ew-table-last-col ew-table-last-row" colspan="10">
        <!-- preview -->
        <div class="ew-nav-tabs">
            <!-- .ew-nav-tabs -->
            <ul class="nav nav-tabs"><li class="nav-item"><a href="#" class="nav-link active" data-toggle="tab" data-table="s_invoicedtl" data-url="/s_invoicedtlpreview?t=s_invoice&amp;f=gKD81aAcp3oYWIAnst6HVg" data-target="#131127">s invoicedtl&nbsp;<span class="badge badge-info ew-detail-count1">1</span></a></li></ul>
            <div class="tab-content">
                <!-- .tab-content -->
                <div class="tab-pane fade active show" id="131127">
                    <div class="card ew-grid s_invoicedtl">
                        <!-- Card Content -->
                    </div>
                    <div data-table="s_invoicedtl" data-url="/s_invoicedtlpreview?t=s_invoice&amp;f=gKD81aAcp3oYWIAnst6HVg" class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-default" title="demo" onclick="window.location='/s_invoicedtllist?showmaster=s_invoice&amp;fk_Id=26'" data-original-title="s invoicedtl">
                            <i data-phrase="MasterDetailListLink" class="icon-table ew-icon" data-caption="Detail List">
                            </i>
                        </button>
                    </div>
                </div>
            </div><!-- /.tab-content -->
        </div><!-- /.ew-nav-tabs -->
    </td>
</tr>

​

票数 1
EN

Stack Overflow用户

发布于 2019-12-30 10:27:46

如果你的意思是当按钮被点击时你想隐藏它，那么你可以简单地将这个添加到按钮中：

代码语言：javascript
复制
onclick="this.style.display = 'none';"

如果没有，您可以使用以下代码来隐藏它：

代码语言：javascript
复制
$('.btn').style.display = 'none';

编辑：您可以为您想要隐藏的按钮添加一个共享类/id(在本例中为类btn)

代码语言：javascript
复制
$(document).ready(function() {
  $('.btn').style.display = 'none';
});
//or if you just want to hide the first button you can use:
$(document).ready(function() {
  $('.btn')[0].style.display = 'none';
});

EDIT 2:

代码语言：javascript
复制
//or if you just want to hide all buttons in the row with the id *Row*:
$(document).ready(function() {
  $('#Row .btn').style.display = 'none';
});
票数 0
EN

Stack Overflow用户

发布于 2019-12-30 10:44:56

如果你想在开始时隐藏每个带有类“.btn-default”的按钮，

试试这样的东西。

代码语言：javascript
复制
$(function(){
    $('button .btn-default').each(function(){

        $(this).hide(); // or $(this).css("display", "none");  

    });
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/59525020

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档