CODEWITHSUNDEEP
jqueryhtmlcss
sonubreeze
sonubreeze

Reputation: 115

Dynamically hide link of specific table row using jQuery

What I am trying to do is to hide link of specific row where status is Granted. Right now I am doing it by using css display:none, but is there any way that I can achieve this dynamically by using jQuery.

Here is the code:

<html>
<head>
    <title></title>
    <script src="css/bootstrap.min.css"></script>
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</style>
</head>
<body>
<table class="table">
  <thead>
    <tr>
      <th>Option</th>
      <th>Name</th>
      <th>Number</th>
      <th>Owner</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#"><span class='glyphicon glyphicon-edit'></span></a></td>
      <td>Title of a Longer Study</td>
      <td>4444-5555-2222-366588</td>
      <td>Daniel Rader</td>
      <td class='pending'>Pending</td>
    </tr>
    <tr>
      <td><a style='display:none;' href="#"><span class='glyphicon glyphicon-edit'></span></a></td>
      <td>This is the Title of the long Study</td>
      <td>4444-5555-2222-698112</td>
      <td>Julia Riches</td>
      <td class='granted'>Granted</td>
    </tr>
    <tr>
       <td><a style='display:none;' href="#"><span class='glyphicon glyphicon-edit'></span></a></td>
      <td>This is the Title</td>
      <td>4444-5555-2222-482920</td>
      <td>Helena John</td>
      <td class='granted'>Granted</td>
    </tr>


</body>
</html>

Upvotes: 1

Views: 389

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

But is there any way that I can achieve this dynamically by using jQuery

Yes, you could hide them when the page is ready:

$(function(){
    $('.granted').each(function(){
        $(this).closest('tr').find('a').hide();
    });
});

Hope this helps.

$(function(){
  $('.granted').each(function(){
      $(this).closest('tr').find('a').hide();
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
  <tr>
    <th>Option</th>
    <th>Name</th>
    <th>Number</th>
    <th>Owner</th>
    <th>Status</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><a href="#"><span class='glyphicon glyphicon-edit'></span></a></td>
    <td>Title of a Longer Study</td>
    <td>4444-5555-2222-366588</td>
    <td>Daniel Rader</td>
    <td class='pending'>Pending</td>
  </tr>
  <tr>
    <td><a href="#"><span class='glyphicon glyphicon-edit'></span></a></td>
    <td>This is the Title of the long Study</td>
    <td>4444-5555-2222-698112</td>
    <td>Julia Riches</td>
    <td class='granted'>Granted</td>
  </tr>
  <tr>
     <td><a href="#"><span class='glyphicon glyphicon-edit'></span></a></td>
    <td>This is the Title</td>
    <td>4444-5555-2222-482920</td>
    <td>Helena John</td>
    <td class='granted'>Granted</td>
  </tr>
</table>

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

If you have control over your HTML, the simplest thing is to also add a class="granted" to your TR elements, and still use CSS:

table tr.granted a{ display: none; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">
  <thead>
    <tr>
      <th>Option</th>
      <th>Name</th>
      <th>Number</th>
      <th>Owner</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class='pending'>
      <td><a href="#"><span class='glyphicon glyphicon-edit'></span></a></td>
      <td>Title of a Longer Study</td>
      <td>4444-5555-2222-366588</td>
      <td>Daniel Rader</td>
      <td class='pending'>Pending</td>
    </tr>
    <tr class="granted">
      <td><a href="#"><span class='glyphicon glyphicon-edit'></span></a></td>
      <td>This is the Title of the long Study</td>
      <td>4444-5555-2222-698112</td>
      <td>Julia Riches</td>
      <td class='granted'>Granted</td>
    </tr>
    <tr class="granted">
      <td><a href="#"><span class='glyphicon glyphicon-edit'></span></a></td>
      <td>This is the Title</td>
      <td>4444-5555-2222-482920</td>
      <td>Helena John</td>
      <td class='granted'>Granted</td>
    </tr>
</table>

Upvotes: 0

Related Questions