Javascript隐藏显示对象

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

好吧，您将 div 包裹在作为表格基础的元素周围。基本上你的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 表格的基本结构

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