Cannot toggle table row display in IE using getElementsByName ()

Question

I want to show and hide table rows based on the value of the selection field, and this works in Firefox, but not in IE:

<select onChange="javascript: toggle(this.value);">
 <option value="cat0">category 0</option>
 <option value="cat1">category 1</option>
</select>

<table>
<tr name="cat0">
  <td>some stuff v</td>
  <td>some stuff v</td>
</tr>
<tr name="cat0">
  <td>some stuff d</td>
  <td>some stuff d</td>
</tr>
<tr name="cat1">
  <td>some stuff a</td>
  <td>some stuff a</td>
</tr>
<tr name="cat1">
  <td>some stuff b</td>
  <td>some stuff b</td>
</tr>
</table>
<script type="text/javascript">
function toggle(category)
{
    // turn everything off
    for (var i = 0; i < 2; i++)
    {
        var cat = document.getElementsByName('cat' + i);
        for (var j = 0; j < cat.length; j++)
            cat[j].style.display = 'none';
    }

    // turn on category chosen
    var cat = document.getElementsByName(category);
    for (var i = 0; i < cat.length; i++)
        cat[i].style.display = '';
}
// start by showing cat0
toggle('cat0');
</script>

Answer 1

IE does not allow you to access table rows using a method document.getElementsByName. If you use an identifier instead of a name, it will work. See this page for code that only does what you are looking for: http://www.toolazy.me.uk/template.php?content=getelementsbyname.xml

Answer 2

With table rows in the second for loop, you must set the display property to table-row

Answer 3

There is an actual IE error. You can use! Just set both the name and identifier for each element (both must have the same value!). For example: <tr name="cat0" id="cat0"> Now it getElementsByNamewill work in IE.

ps. I know this is an old question, but I tried to solve this problem 5 minutes ago. So this may help someone: p