2010-05-18 1 views
3

getElementsByName()와 IE에서 테이블 행의 표시를 전환 할 수 없음이 파이어 폭스에서 작동하지만 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> 
+1

tr 요소에는 이름 속성이 없습니다. HTML이 잘못되었습니다. –

답변

6

IE에 표시 속성을 설정해야합니다. 이름 대신 ID를 사용하면 작동합니다. 찾고있는 것을 수행하는 코드는이 페이지를 참조하십시오. http://www.toolazy.me.uk/template.php?content=getelementsbyname.xml

+0

허, 너는 매일 새로운 것을 배웠다. 그러나 나는'display' 속성을'table-row'로 설정하는 것도 필요하다고 생각합니다. –

+0

@SeattleLeonard'table-row'는 IE에서 지원하지 않습니다 - http://www.w3schools.com/css/pr_class_display.asp – xandercoded

1
루프에 대한 두 번째 테이블의 행

당신은 당신이 document.getElementsByName 방법을 사용하여 테이블 행에 액세스 할 수 없습니다 table-row

0

실제로 IE 버그가 있습니다! name과 id 둘 다 각 요소에 대해 간단히 설정하십시오 (둘 다 같은 값을 가져야합니다!). 예 : <tr name="cat0" id="cat0"> 이제 getElementsByName도 IE에서 작동합니다.

ps. 나는 이것이 낡은 질문이라는 것을 알고 있지만 5 분 전에이 문제를 해결하려고 노력했다. 그래서 누군가에게 도움이 될 수 있습니다 : p