Hide a table row element inside a table using javascript

Question

I want to hide a table row when a td has no value, but my javascript function is failing. It keeps going on the "else".

HTML

<table>
   <tr id="locOfWorkRow"> 
     <td><span>Location of Work</span></td>
   </tr>
   <tr>
     <td><span>This is the label</span></td>
     <td id="road"><span></span></td>
   </tr>
</table>

Javascript

var r = document.getElementById('road').innerHTML; 

 if(r == ""){ alert("on if");
   document.getElementById('locOfWorkRow').style.display = "none";
 }else{
    alert("on else");
 }

Jako Basson · Accepted Answer · 2015-05-28 07:02:17Z

2

Instead of checking for an empty string, check whether the length of the innerHTML is more than 0 instead.

r.length > 0

If the string is empty, the length will return 0, if the the innerHTML contains any characters the length will return a value greater than 0.

What you are currently doing with r == "" is checking whether r is empty and that is why the "on if" alert is showing.

See this example

http://jsfiddle.net/9ny6598u/

edited May 28, 2015 at 7:02

answered May 28, 2015 at 6:56

Jako Basson

1,54113 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ti J Over a year ago

Apology but I put a wrong statement at first. The row should be hidden if td has NO value on it.

Jako Basson Over a year ago

So if the td is empty you want to hide it? See this fiddle jsfiddle.net/9ny6598u/3 . Please update your question to reflect that this is what you actually require. The td <td id="road"></td> is now emptied and locOfWorkRow is now hidden in the if(r.length == 0). let me know if thats not what you need?

Satinder singh · Accepted Answer · 2015-05-28 06:57:41Z

0

var r = document.getElementById('road').innerHTML;

if (r.length > 0) {
    alert("on if");
    document.getElementById('locOfWorkRow').style.display = "none";
} else {
    alert("on else");
}

DEMO

answered May 28, 2015 at 6:57

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

Comments

Vivek Gupta · Accepted Answer · 2015-05-28 06:57:56Z

0

You are using wrong if condition

use if(r != "") instead of r==""

answered May 28, 2015 at 6:57

Vivek Gupta

1,0455 silver badges7 bronze badges

Comments

Vijay Patel · Accepted Answer · 2015-05-28 07:01:03Z

0

Hope you are not loading your javascript before page try to write your javascript at the end of the page so the element is available and you not get the null reference.

and by innerhtml you got the "span Road 1 /span" so write condition as per that. and its work fine if you load your script below body.

Make sure you have loaded your script after html load.

answered May 28, 2015 at 7:01

Vijay Patel

1732 silver badges14 bronze badges

Comments

kwangsa · Accepted Answer · 2015-05-28 07:03:29Z

0

using undefined as comparison instead of empty string and also use === instead of ==

if(r === undefined){ alert("on if");
  document.getElementById('locOfWorkRow').style.display = "none";
}else{
  alert("on else");
}

answered May 28, 2015 at 7:03

kwangsa

1,71112 silver badges16 bronze badges

Comments

Keval Bhatt · Accepted Answer · 2015-05-28 07:05:36Z

0

Actually your if condition is wrong

Example: http://jsfiddle.net/kevalbhatt18/bvop1gdq/

if(r !== ""){ alert("on if"); document.getElementById('locOfWorkRow').style.display = "none"; }else{ alert("on else"); }

Or

if (r.length > 0) { alert("on if"); document.getElementById('locOfWorkRow').style.display = "none"; } else { alert("on else"); }

edited May 28, 2015 at 7:05

answered May 28, 2015 at 6:58

Keval Bhatt

6,3623 gold badges26 silver badges40 bronze badges

Comments

Sujith · Accepted Answer · 2015-05-28 07:16:18Z

0

Instead of innerHTML you may use innerText or textContent

var r = document.getElementById('road').innerText || document.getElementById('road').textContent;

answered May 28, 2015 at 7:16

Sujith

2061 silver badge6 bronze badges

Collectives™ on Stack Overflow

Hide a table row element inside a table using javascript

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related