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

标签 jquery html css

我想做的是隐藏状态为授予的特定行的链接。现在我正在通过使用 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/

相关文章:

javascript - 将 jquery(.each, .find,.next) 转换为 javascript

javascript - 没有水平滚动条的jquery图像动画

javascript - jQuery、JavaScript、HTML : how to load images after everything else is loaded?

html - 如何在 Safari 中将 flex 容器的绝对定位子项居中?

javascript - 如何在Java中使用HtmlUnit从页面获取 "Publish Date"动态值?

javascript - 如何更改特定标签的内容?

javascript - 使用 .trigger ('resize' 时将参数传递给 $(window).on ('resize' )

javascript - 在 JS/JQuery 中缩放和平移就像我们可以使用 SVG 一样

javascript - 有没有办法在同一个视频中分别播放音频和视频

javascript - 如何使用 Javascript 将所需功能添加到我的个人列表中?