无法使用getElementsByName()在IE中切换表行的显示

时间:2010-05-18 21:39:53

标签: javascript html dhtml

我想根据选择框的值显示和隐藏表格的行,这适用于Firefox而不是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>

3 个答案:

答案 0 :(得分:6)

IE不允许您使用document.getElementsByName方法访问表格行。如果您使用ID而不是名称,它将起作用。有关您正在寻找的代码,请参阅此页面:http://www.toolazy.me.uk/template.php?content=getelementsbyname.xml

答案 1 :(得分:1)

在第二个for循环中使用表行,您需要将display属性设置为table-row

答案 2 :(得分:0)

有一个IE bug你可以使用!只需为每个元素设置name和id(两者都必须具有相同的值!)。 例如: <tr name="cat0" id="cat0"> 现在getElementsByName也可以在IE中使用。

PS。我知道这是一个老问题,但我试图在5分钟前解决这个问题。所以它可能对某人有所帮助:p