자바 스크립트 숨기기 show hide

Question

이 코드는 작동하지 않습니다. 이유가 무엇입니까?

<script> 
function color(color_type){ 
    if (color_type == 'blue'){ 
     document.getElementById('blue').style.display = 'block'; 
     document.getElementById('red').style.display = 'none'; 
    } 
    else{ 
     document.getElementById('blue').style.display = 'none'; 
     document.getElementById('red').style.display = 'block'; 
    } 
} 
</script> 

<select onchange="color(this.value)"> 
    <option name="choice1" value="red" >red</option> 
    <option name="choice2" value="blue" >blue</option> 
</select> 

<div id="red" style="display:none;"> 
    <? 
    // 
    echo "<tr> 
<td width='100' class='tbl'>Just ask</td> 
<td width='80%' class='tbl'><input type='text' name='1' value='$n1' class='textbox' style='width: 250px'></td> 
</tr>"; 
    // 
    ?> 
</div> 

<div id="blue" style="display:none;"> 
     <? 
    // 
    echo "<tr> 
<td width='100' class='tbl'>Just ask blue</td> 
<td width='80%' class='tbl'><input type='text' name='2' value='$n2' class='textbox' style='width: 250px'></td> 
</tr>"; 
    // 
    ?> 
</div> 

Td 테이블은 숨길 때마다이 테이블을 표시합니다. 파란색 또는 빨간색으로 표시하려면 "파란색으로 물어보기"또는 "그냥 묻기"를 선택해야합니다.

P.S 내 나쁜 영어

Answer 1

잘 포장 테이블의 기초 인 요소 주위 사업부 죄송합니다. 기본적으로 HTML 구조가 잘못되었습니다.

<div id="red" style="display:none;"> 
    <? 
    // 
    echo "<table><tr> 
<td width='100' class='tbl'>Just ask</td> 
<td width='80%' class='tbl'><input type='text' name='1' value='$n1' class='textbox' style='width: 250px'></td> 
</tr></table>"; 
    // 
    ?> 
</div> 

<div id="blue" style="display:none;"> 
     <? 
    // 
    echo "<table><tr> 
<td width='100' class='tbl'>Just ask blue</td> 
<td width='80%' class='tbl'><input type='text' name='2' value='$n2' class='textbox' style='width: 250px'></td> 
</tr></table>"; 
    // 
    ?> 
</div> 

는 HTML 테이블이 유효하지 않은 HTML을 생성했기 때문에

http://www.w3schools.com/html/html_tables.asp

Answer 2

의 기본 구조에서보세요. DIV 요소의 TABLE 요소는 HTML 표준 (또는 해당 문제에 대한 HTML 준수)을 준수하지 않으므로 래핑 할 수 없습니다. 행을 숨기려면 ID를 TR 요소에 할당하고 DIV를 잃어 버리십시오.

<? 
// 
echo "<tr id='blue' style='display:none;'> 
    <td width='100' class='tbl'>Just ask</td> 
    <td width='80%' class='tbl'><input type='text' name='1' value='$n1' class='textbox' style='width: 250px'></td> 
</tr>"; 
// 
?> 

Answer 3

먼저 HTML을 입력하십시오. 선택한 개체를 전달하지만 선택한 값은 이며 HTML이 아니라 javascript 함수 내에서 결정하십시오. 아래 그림과 같이 선택을 간단하게하십시오. 추가 ID 속성이 작동하지 않아도됩니다. 요즘 사용할 수있는 참조를 제공하는 것은 좋은 프로그래밍 습관입니다.

이제 자바 스크립트를 사용하여 select 값을 결정할 수 있습니다. 귀하의 예제와 은, 변화는 그것은 나를 위해 잘 작동

function color(choices){ 

    var color_type = choices.options[ choices.selectedIndex ].value; 

    if (color_type == 'blue'){ 
     document.getElementById('blue').style.display = 'block'; 
     document.getElementById('red').style.display = 'none'; 
    } 
    else{ 
     document.getElementById('blue').style.display = 'none'; 
     document.getElementById('red').style.display = 'block'; 
    } 
}