Do X if element is Y

[Kim]

How do I find if an element is a certain element (like
HTMLTableRowElement) ?

Using "alert(typeof el)" simply displays "object" while "alert(el)"
displays "HTMLTableRowElement".
el = document.getElementById('stringValue');

I need to match this specific element because of problems with
"display: none/block" in non-IE browsers.

This doesnt work:
if (el == HTMLTableRowElement || el == 'HTMLTableRowElement') {
el.style.display = '';
} else {
el.style.display = 'block';
}

 

[Martin Honnen]

How do I find if an element is a certain element (like
HTMLTableRowElement) ?

Assuming you know you script an (X)HTML element then
if (el.tagName.toLowerCase() === 'tr')
should suffice.

 

[Henry]

How do I find if an element is a certain element (like
HTMLTableRowElement) ?

The element's - tagName - or - nodeName - properties would seem like a
good place to start (remembering that despite any possible impressions
to the contrary given by the mark-up, the document likely is an HTML
document and so those properties values will be case-normalised to
uppercase).

Using "alert(typeof el)" simply displays "object" while
"alert(el)" displays "HTMLTableRowElement".
el = document.getElementById('stringValue');

I need to match this specific element because of problems with
"display: none/block" in non-IE browsers.

This doesnt work:
if (el == HTMLTableRowElement || el == 'HTMLTableRowElement') {
el.style.display = '';

<snip>

If your CSS and mark-up are such that the above works anywhere (which
would be expected) then it will also work fine on IE. That is, you
don't need to test and branch, you just assign the empty string to the
display property and the display state will revert to its normal/
default value (all else being equal).

 

[Kim]

Assuming you know you script an (X)HTML element then
   if (el.tagName.toLowerCase() === 'tr')
should suffice.

Thanks, that works fine. Its XHTML 1.0 T.

If I have to add additional elements later, then is there an easier
solution then using multiple if-statements ?

 

[Martin Honnen]

If I have to add additional elements later, then is there an easier
solution then using multiple if-statements ?

switch (el.tagName.toLowerCase())
{
case 'tr':
...
break;
case 'td':
...
break;
}

 

[Gabriel Gilini]

If I have to add additional elements later, then is there an easier
solution then using multiple if-statements ?

I have a way simpler solution. Put a class in your table via
javascript:

var t = document.getElementById('myTable');
t.className = t.className ? t.className + 'foo' : 'foo';

Then hide the elements via CSS:

..foo tr {
display: none;
}

Cheers

 

[Kim]

The element's - tagName - or - nodeName - properties would seem like a
good place to start (remembering that despite any possible impressions
to the contrary given by the mark-up, the document likely is an HTML
document and so those properties values will be case-normalised to
uppercase).




<snip>

If your CSS and mark-up are such that the above works anywhere (which
would be expected) then it will also work fine on IE. That is, you
don't need to test and branch, you just assign the empty string to the
display property and the display state will revert to its normal/
default value (all else being equal).

Thanks for the explanation why "display: ''" works. Guess I can remove
the "else" now.

@Martin: I was thinking more of using an array. A switch simply makes
it look nicer.
@Gabriel: You got it wrong. I dont want to hide the whole table - just
a part of it. And without making classes for each table I do this in.

Problem is solved.

 

[Gabriel Gilini]

@Gabriel: You got it wrong. I dont want to hide the whole table - just
a part of it. And without making classes for each table I do this in.

Well, is the part you want to hide always the same?
Because if it is, you can still do what I said.

You just set a class to the elements you want hidden, like 'hide'

 

[Gabriel Gilini]

Well, is the part you want to hide always the same?
Because if it is, you can still do what I said.

You just set a class to the elements you want hidden, like 'hide'

Sorry, sent it by accident.

Like I was saying, let's say you have this table

<table id="myTable">
<tr class="hide">
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>

var t = document.getElementById('myTable');
t.className = t.className ? t.className + 'foo' : 'foo';

Still the same

..foo tr.hide {

display: none;
}

And there you go

Cheers

 

[RobG]

How do I find if an element is a certain element (like
HTMLTableRowElement) ?

Using "alert(typeof el)" simply displays "object" while "alert(el)"
displays "HTMLTableRowElement".
el = document.getElementById('stringValue');

I need to match this specific element because of problems with
"display: none/block" in non-IE browsers.

This doesnt work:
if (el == HTMLTableRowElement || el == 'HTMLTableRowElement') {
        el.style.display = '';} else {

        el.style.display = 'block';

}

Toggle between '' (empty string) and 'none', then you don't care about
the default style. Setting style.display to '' will return the
element's display property to its default value, whatever that might
be. Setting it to 'none' will hide it and remove it from the document
flow so it takes up zero space.