开发者

Can't toggle display of table rows in IE with getElementsByName()

开发者 https://www.devze.com 2022-12-30 14:17 出处:网络
I want to show and hide rows of a table based on th开发者_Go百科e value of a select box and this works in Firefox but not IE:

I want to show and hide rows of a table based on th开发者_Go百科e value of a select box and this works in Firefox but not 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>


IE doesn't let you access table rows using the document.getElementsByName method. If you use ID's instead of name's it will work. See this page for code that does just what you are looking for: http://www.toolazy.me.uk/template.php?content=getelementsbyname.xml


With table rows in your second for loop you need to set the display property to table-row


There is actualy an IE bug You can use! Simply set for each element both name and id (both must have same value!). For example: <tr name="cat0" id="cat0"> Now getElementsByName will work in IE too.

ps. I know this is old question, but i was trying to solve this problem 5min ago. So it might help someone :p

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号