Question

我想单击“ dialog-btn-hide”按钮以隐藏包含“ NO.2，Eric，182”的一行。

这意味着从'th-> NO.2'数据获取其父级'tr'，并隐藏此'tr'行

我该怎么办？

<Script>$(function () {

    $('#dialog-btn-hide').click(function () {
        //The code is invalid 
var lsTemp = $("#myTable tr th[text='NO.2']");       
lsTemp.hide();


});
</Script>

<table class="table table-hover table-bordered" id="myTable">
    <tbody>
          <tr class="clickable-row">
             <th>NO.1</th>
             <td>John</td>
             <td>185</td>
          </tr>
           <tr class="clickable-row">
              <th>NO.2</th>
              <td>Eric</td>
              <td>182</td>
           </tr>
           <tr class="clickable-row">
               <th>NO.3</th>
               <td>Tim</td>
               <td>180</td>
           </tr>
    </tbody>                                          
</table>

<div class="form-group">
    <div class="col-xs-12">
        <div class="text-center">
            <button id="dialog-btn-hide" >Hide</button>
        </div>
     </div>
 </div>

Answer 1

使用以下JS代码，它将起作用

$('#dialog-btn-hide').click(function () {
        //The code is invalid 
        var lsTemp = $("#myTable tr:contains('NO.2')");
        lsTemp.hide();
});

您的代码不起作用，因为您的选择器找不到任何元素。

Answer 2

您可以使用包含选择器：

https://api.jquery.com/contains-selector/

但是您应该使用属性“数据”选择器来提高性能，维护和简化测试：

https://tympanus.net/codrops/css_reference/attribute-selectors/

如何从Grid内容的文本中隐藏一行？

2 个答案: