Hiding TR whose childNode has certain value

[Mungossss]

Hi GUYS,

I have been following the forum for quite some time and I have to say it is impresive to find so much usefull information. Time and time again if I got stuck I would come here and find an answer and that is great. Now for this problem, unfortunatelly, I did not find a solution, so I am making this post.

I have an issue with dinamically generated CFML page. The page is working properly but what I am trying to do is use JavaScript to hide some content on this page. Here is a short summary of the JS code and HTML code that is supposed to hide:

function getlost() {
var row = document.getElementsByTagName('select');

for (var i=row.length-1; i>=0; i--) {
var cols = row.getElementsByTagName('td');
for (var j=cols.length-1; j>=0; j--) {
if (cols[j].firstChild.nodeValue == 'Security Level:')
{

cols[j].parentNode.style.display = 'none';
}
}
}
}


and HTML:

<TR>
<TD WIDTH="150" VALIGN="TOP" ALIGN="LEFT" NOWRAP>
<FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="2">Security Level:</FONT>
</TD>
<TD WIDTH="100%" VALIGN="TOP" ALIGN="LEFT">

<SELECT NAME="component_2094983">

<OPTION VALUE="A">A</OPTION>
<OPTION VALUE="B" selected>B</OPTION>
<OPTION VALUE="C">C</OPTION>
<OPTION VALUE="D">D</OPTION>

</SELECT>

&nbsp;<FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="2" COLOR="FF0000">*</FONT>

</TD>
</TR>

Any help would be appreciated!

 

[tsuji]

[1] You use getElementsByTagName("select"), but you actually want to get to the "table". But to get to the concrete table, you need to further specific which one. By starting with getting "select" is already a big error.

>var row = document.getElementsByTagName('select');
[tt]var row = document.getElementsByTagName('table'); //it is actually a table collection![/tt]

[2] The rest is so much confusing and technically far from perfect, I find it hard to point out multiple error one by one!

Table exposes specific members for the location of children... It is rows and cells. Furthermore, you style related tag <font> etc intervening making the search for "Security Level:" so much to the hazard of not changing one iota of the particular scripting of the table's cells.

Here is how it can be done more generically. (Supposing there is only one table, or that the table is the first.)
[tt]
function getlost() {
var rows = document.getElementsByTagName('table')[0];

for (var i=rows.length-1; i>=0; i--) {
var cols = rows.cells;
for (var j=cols.length-1; j>=0; j--) {
if (cols[j].innerHTML.indexOf('Security Level:')!=-1) {
cols[j].parentNode.style.display = 'none';
}
}
}
}
[/tt]

 

[BillyRayPreachersSon]

If you only want to hide the contents of one cell, why not wrap a div or span around it, give it an ID, and use one line of code to do it?

document.getElementById('theId').style.display = 'none';

If you have multiple tables with the same information, use a class instead.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Mungossss]

Thanks both for your replies!

tsuji:
I was led to beleive that it does not matter what tag you search for, as long as it is on the page. OK, let's say I have no idea how many tables are on the page, or trs, or tds. I know that select tag is the third one, since there are only 3. Should I search for the font tags, maybe? If you guys want to see the code, here it is...

https://programs.regweb.com/johndeere/warsawwave1/es/index.cfm

BillyRayPreachersSon:
I cannot add any code since everything is dynamically generated. I just hope it was something like that, add maybe an ID or class. In this case unfortunately not.

I did actually manage to hide the whole page using this code:

function getlost() {
var rows = document.getElementsByTagName('tr');

for (var i=rows.length-1; i>=0; i--) {
var cols = rows.cells;
for (var j=cols.length-1; j>=0; j--) {
if (cols[j].innerHTML.indexOf('Security Level:')!=-1) {
cols[j].parentNode.style.display = 'none';
}
}
}
}

So something is working....Please view the source-code once you visit the page.


Cheers!

 

[tsuji]

If table index is indefinite, using getElementsByTagName("tr") is still viable. Try this. As long as there is only one characteristic tr, it should perform. If there are multiple characteristic tr with "Security Level:" embedded inside, all of them will be hidden.
[tt]
function getlost() {
var rows = document.getElementsByTagName('tr');

for (var i=rows.length-1; i>=0; i--) {
var cols = rows.cells;
for (var j=cols.length-1; j>=0; j--) {
if (cols[j].innerHTML.indexOf('Security Level:')!=-1) {
[blue]rows[/blue].style.display = 'none';
[blue]break;[/blue]
}
}
}
}
[/tt]

 

[Mungossss]

Thanks tsuji. innerHTML really made a difference. This is my final code. If it can be written differently please advise but I am happy that it solved my problem.

function getlost() {
var row = document.getElementsByTagName('tr');

for (var i=row.length-1; i>=0; i--) {
var cols = row.getElementsByTagName('font');
for (var j=cols.length-1; j>=0; j--) {
if (cols[j].innerHTML.indexOf('Security Level:')!=-1)
{

cols[j].parentNode.parentNode.style.display = 'none';
break;
}
}
}
}

Cheers!