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

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

我尝试了以下代码，但找不到按钮。

$(".s_invoicedtl").closest(".card").find(".btn-default")

这是包含按钮的一行的 HTML -

<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>

您尝试中的.find()不起作用，因为当按钮是您选择的同级时，它会从您的选择中降序搜索

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

。

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();
})

<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>

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

尝试这样的事情。

$(function(){
$('button .btn-default').each(function(){
$(this).hide(); // or $(this).css("display", "none");  
});
});

如果您的意思是要在单击按钮时隐藏按钮，那么只需将其添加到按钮中即可：

onclick="this.style.display = 'none';"

如果没有，您可以使用此代码将其隐藏：

$('.btn').style.display = 'none';

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

$(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';
});

编辑2：

//or if you just want to hide all buttons in the row with the id *Row*:
$(document).ready(function() {
$('#Row .btn').style.display = 'none';
});

相关内容

最新更新

热门标签：