Selectively displaying tr tags

[joeoz]

I am looking for the "best" way to selectively display tr tags. Originally I used getElementById() and display = none/inline, but that only works on an individual element basis. I would like to be able to apply this to multiple rows at a time. So basically I would be able to display or not display a whole block of rows based on the value of a drop list.

I am comfortable with the javascript and html part, it's the css and the specific javascript collections and methods I need help with.

 

[theocraticmind]

There may be a better solution, because this one is kinda complicated. But the first thing that came to my mind is using classes, and getting to them by looping through IDs. For example.

<table>
<tr><tr id=&quot;td1&quot;></td></tr>
<tr><tr id=&quot;td2&quot;></td></tr>
<tr><tr id=&quot;td3&quot;></td></tr>
<tr><tr id=&quot;td4&quot;></td></tr>
</table>

<script>
for (i=1;i<5;i++){
if (document.getElementById(&quot;td&quot; + i).className = &quot;someName&quot{
document.getElementById(&quot;td&quot; + i).style.display = none;
}elseif (document.getElementById(&quot;td&quot; + i).className = &quot;someOtherName&quot{
document.getElementById(&quot;td&quot; + i).style.display = inline;
}
}
</script>


That should work in my head. But I warn you, I'm a asp/vbscript programmer, so I may have screwed up some of the js syntax. So, if you can find nothing simpler, this may do your job.

 

[joeoz]

Thanks. That type of thing seems to work here too. I did it a little more flexibly by putting each of the element id's in the value of a select and then split them using js. That seems to work fine in IE, but it doesn't display well in NS6. I think there is a problem with tr's and id's but I just don't know enough about what is supported in css.

<select name=&quot;select1&quot; onChange=&quot;changeVisibility();&quot;>
<option value=&quot;cc0,cc1,cc2&quot; selected>Credit Card</option>
<option value=&quot;ach0,ach1,ach2&quot;>ACH</option>
<option value=&quot;gc0,gc1,gc2&quot;>Gift Card</option>
</select>


<script language=&quot;javascript&quot;>
function changeVisibility()
{
var oSelect = document.form1.select1;
var oOptions = oSelect.options;
var selectedInd = oSelect.selectedIndex;

for (var i = 0; i < oOptions.length; i++)
{
var elementIds = oOptions.value.split(&quot;,&quot;

if (i == selectedInd)
{
for (var j = 0; j < elementIds.length; j++)
{
var evalString = &quot;document.getElementById('&quot; + elementIds[j] + &quot;').style.display = 'inline'&quot;;
eval(evalString);
}
}
else
{
for (var j = 0; j < elementIds.length; j++)
{
var evalString = &quot;document.getElementById('&quot; + elementIds[j] + &quot;').style.display = 'none'&quot;;
eval(evalString);
}
}
}

oSelect.selectedIndex = selectedInd;
}
</script>

 

[joeoz]

Thanks for the help. I found that Netscape supports 'table-row' and IE supports 'inline'. I'm not sure about other browsers. Here's the code I ended up using:


<script language=&quot;javascript&quot;>
function changeVisibility()
{
var oSelect = document.form1.select1;
var oOptions = oSelect.options;
var selectedInd = oSelect.selectedIndex;

for (var i = 0; i < oOptions.length; i++)
{
var elementIds = oOptions.value.split(&quot;,&quot;

if (i == selectedInd)
{
for (var j = 0; j < elementIds.length; j++)
{
var evalString = getEvalString(elementIds[j], true);
eval(evalString);
}
}
else
{
for (var j = 0; j < elementIds.length; j++)
{
var evalString = getEvalString(elementIds[j], false);
eval(evalString);
}
}
}

oSelect.selectedIndex = selectedInd;
}

function getEvalString(pElementId, pShouldDisplay)
{
var evalString = &quot;document.getElementById('&quot; + pElementId + &quot;').style.display = &quot;;
if (pShouldDisplay)
{
if (navigator.appName.indexOf(&quot;Microsoft&quot!=-1)
{
evalString += &quot;'inline'&quot;;
}
else
{
evalString += &quot;'table-row'&quot;;
}
}
else
{
evalString += &quot;'none'&quot;;
}

return evalString;
}
</script>