Paul S Paul S - 1 year ago 45
Javascript Question

hide button in a row on certain value of a column

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

should have a visible restart button

here is a fiddle link:

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
is always empty.

Answer Source

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