By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,045 Members | 1,389 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,045 IT Pros & Developers. It's quick & easy.

Do X if element is Y

P: n/a
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';
}
Nov 17 '08 #1
Share this Question
Share on Google+
9 Replies


P: n/a
Kim wrote:
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.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Nov 17 '08 #2

P: n/a
On Nov 17, 1:00 pm, Kim wrote:
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).
Nov 17 '08 #3

P: n/a
Kim
On Nov 17, 2:07*pm, Martin Honnen <mahotr...@yahoo.dewrote:
Kim wrote:
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.

--

* * * * Martin Honnen
* * * *http://JavaScript.FAQTs.com/
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 ?
Nov 17 '08 #4

P: n/a
Kim wrote:
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;
}

--

Martin Honnen
http://JavaScript.FAQTs.com/
Nov 17 '08 #5

P: n/a
On Nov 17, 11:32*am, Kim <kims...@gmail.comwrote:
On Nov 17, 2:07*pm, Martin Honnen <mahotr...@yahoo.dewrote:
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

--
Gabriel Gilini
Nov 17 '08 #6

P: n/a
Kim
On Nov 17, 2:27*pm, Henry <rcornf...@raindrop.co.ukwrote:
On Nov 17, 1:00 pm, Kim wrote:
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).
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.
Nov 17 '08 #7

P: n/a
On 17 nov, 13:20, Kim <kims...@gmail.comwrote:
On Nov 17, 2:27*pm, Henry <rcornf...@raindrop.co.ukwrote:
@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'
Nov 17 '08 #8

P: n/a
On 17 nov, 21:53, Gabriel Gilini <gabr...@usosim.com.brwrote:
On 17 nov, 13:20, Kim <kims...@gmail.comwrote:
On Nov 17, 2:27*pm, Henry <rcornf...@raindrop.co.ukwrote:
@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'
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>
</table>
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

--
Gabriel Gilini
Nov 18 '08 #9

P: n/a
On Nov 17, 11:00*pm, Kim <kims...@gmail.comwrote:
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.
--
Rob
Nov 18 '08 #10

This discussion thread is closed

Replies have been disabled for this discussion.