在某列的某个值上连续隐藏按钮

我有一个包含任务及其状态的自动生成表。每行都有一个按钮来重新启动任务。在某列的某个值上连续隐藏按钮

如果任务的值不等于“错误”，我想隐藏重启按钮。所以，换句话说：只有Status==Error的任务应该有一个明显的重启键

这里是一个小提琴链接：https://jsfiddle.net/hwqt7c3a/5/

我曾尝试：

window.onload = function() { 
      $(function() { 
       $('table tr').each(function() { 
        var Cells = this.getElementsByTagName("td"); 
        if (Cells[2].innerText !== 'Error') { 
         $(this).find('button').style.visibility = 'hidden'; 
        } 
       }); 
      }); 
     }

但由于某种原因Cells总是空。

来源

2016-04-25 Paul S

我已经更新了你的小提琴，这里是working fiddle

$(function() {        //document ready event 
    $('table tr').each(function() {   //loop all tr's 
    var Cell = $(this).find('td:eq(2)'); //find the 3rd td cell 
    if (Cell.text() !== 'Error') {   //check if its text is "Error" 
     $(this).find('button').hide();  //if try then find the button of this tr and hide it   
    } 
    }); 
});

不要混合使用JavaScript和jQuery的语法，

而且你不需要这两个线

window.onload = function() { // javascript way of handling document ready 
      $(function() { // jquery way of handling document ready.

使用其中之一由于您正在使用jQuery库那么它更好使用

$(function() {

所以，你不要混淆了语法..

如果希望TD占用的空间按钮，在UI，但仍然被隐藏，然后你必须使用

$(this).find('button').css("visibility","none")

来源

2016-04-25 09:32:52

;(function($){ 
$(document).ready(function(){ 
    $('table tr').each(function() { 
    if ($(this).find("td").eq(2).text() !== 'Error') { 
    $(this).find('button').css("visibility","none") 
    } 
    }); 
}) 
})(jQuery)

PS：你已经使用jQuery，所以我会建议不要用香草JS混用。尝试这个。

来源

2016-04-25 09:34:01

更改脚本，如下所示。它在你的脚本中有一些小的改变来处理错误。

<script> 
    window.onload = function() { 
     $(function() { 
      $('table tr').each(function() { 
       var Cells = this.getElementsByTagName("td"); 
       if (Cells != undefined && Cells.length > 0 && Cells[2].innerText !== 'Error') { 
        $(this).find('button').attr("style", "visibility: hidden"); 
       } 
      }); 
     }); 
    } 
</script>

来源

2016-04-25 09:35:38

可以使用:nth-child选择是检查值=== Error然后去了第一个孩子，并与empty()功能

代码中删除按钮：

$(document).ready(function() { 
 
    
 
    $('table tr').each(function() { 
 
    
 
    if($(this).children(':nth-child(3)').text() === 'Error'){ 
 
    \t $(this).children(':nth-child(1)').empty(); 
 
    } 
 
    
 
\t }); \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border='1'> 
 
    <thead> 
 
    <th></th> 
 
    <th>ID</th> 
 
    <th>Status</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="grid-row "> 
 
     <td class="grid-cell" data-name=""> 
 
     <button type="submit">Restart</button> 
 
     </td> 
 
     <td class="grid-cell" data-name="job_id">2349</td> 
 
     <td class="grid-cell" data-name="JobStatusName">Completed</td> 
 
    </tr> 
 
    <tr class="grid-row "> 
 
     <td class="grid-cell" data-name=""> 
 
     <button type="submit">Restart</button> 
 
     </td> 
 
     <td class="grid-cell" data-name="job_id">6585</td> 
 
     <td class="grid-cell" data-name="JobStatusName">Error</td> 
 
    </tr> 
 
    <tr class="grid-row "> 
 
     <td class="grid-cell" data-name=""> 
 
     <button type="submit">Restart</button> 
 
     </td> 
 
     <td class="grid-cell" data-name="job_id">4564</td> 
 
     <td class="grid-cell" data-name="JobStatusName">Processing</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

来源

2016-04-25 09:41:27 fbid

勾选此Fiddle

你不需要用jquery

混合window.onLoad()并没有论据，让你的迭代html element

编辑：

$(function() { 
    $('table tbody tr').each(function(i, e) { 
    var status = $(e).find("td:eq(2)").html(); 
    if (status !== 'Error') { 
     $(e).find('button').hide(); 
    } 
    }); 
});

来源

2016-04-25 09:42:41

在某列的某个值上连续隐藏按钮

回答

相关问题