Question

我要做的是隐藏状态为Granted的特定行的链接。现在我使用css display:none来做这件事，但有没有办法可以通过使用jQuery动态实现这一点。

以下是代码：

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

Answer 1

但有什么方法可以通过使用jQuery
动态实现这一点

是的，您可以在页面准备就绪时隐藏它们：

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

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您可以控制HTML，最简单的方法是在class="granted"元素中添加TR，并仍使用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>

使用jQuery动态隐藏特定表行的链接

2 个答案: