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

我想要做的是隐藏特定行的状态为授予的链接。现在我正在通过使用css display:none来做到这一点，但有什么办法可以通过使用jQuery来动态实现这一点。使用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>

来源

2017-04-30 sonubreeze

但是有什么办法，我可以通过使用jQuery

是的，你可以把他们藏在页面准备动态实现这一点：

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

希望这会有所帮助。

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

来源

2017-04-30 13:56:34

如果你有在你的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>

来源

2017-04-30 14:02:36

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

回答

相关问题