hide button in a row on certain value of a column

Question

I have an autogenerated table with tasks and their status. Each row has a button to restart the task.

I want to hide the restart button if the the value of the task isn't equal to "Error". So in other words: only the tasks with Status==Error should have a visible restart button

here is a fiddle link: https://jsfiddle.net/hwqt7c3a/5/

I have tried:

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

but for some reason Cells is always empty.

Answer 1

I have updated your fiddle , Here is the 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          
    }
  });
});

---

Do not mix javascript and Jquery syntax,

Also you don't need both these lines

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

use either one, Since you are using Jquery library then its better you use

$(function () {

So that you dont mix up the syntaxes..

---

if you want the td to take up the button space in the UI but still be hidden then you have use

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

Answer 2

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

P.s: you already use jQuery so i would recommend to not mix it with vanilla js. Try this.

Answer 3

You can use the :nth-child selector to check is the value is === Error and then go to the first child and remove the button with empty() function

Code:

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

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

Answer 4

Change script as per below. It have some minor change in your script for error handling.

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

Answer 5

Check this Fiddle

You don't need to mix window.onLoad() with jquery

and there is argument for $.each(function(i, e){}); which gives you the iterating html element

EDIT:

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