0

I want to click “dialog-btn-hide” button to hide one row which include ‘NO.2，Eric，182。

It means from the 'th->NO.2' data to get it parent 'tr'，and hide this 'tr' row

How can I do?

<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>
Bahman Parsa Manesh
  • 2,314
  • 3
  • 16
  • 32
Peter Lo
  • 55
  • 6

2 Answers2

1

Use following JS code and it will work

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

Your code does not work because your selector cannot find any element.

Zeeshan
  • 619
  • 4
  • 16
  • I test this code "var lsTemp = $("#myTable tr:contains('NO.2')"); lsTemp.hide();" In IE and Opera browser ， It works 。 but in the Chrome browser it is still invalid ~ – Peter Lo Aug 27 '18 at 02:02
  • I use the Chrome browser to test in my friend computer ，it also works。 It should be something wrong with my computer 。 thnak you very much~ – Peter Lo Aug 30 '18 at 03:16
1

You can use contains selector:

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

But you should use attribute 'data' selector for improved performance, maintenance and simplier testing:

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

user3592331
  • 61
  • 3
  • I have adopted the attribute 'data' selector https://stackoverflow.com/questions/4146502/jquery-selectors-on-custom-data-attributes-using-html5 – Peter Lo Aug 27 '18 at 03:38