我想做的是隐藏状态为授予的特定行的链接。现在我正在通过使用 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>
最佳答案
But is there any way that I can achieve this dynamically by using 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>
关于jquery - 使用 jQuery 动态隐藏特定表行的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43707153/