Javascript隱藏顯示對象

此代碼不起作用，爲什麼？Javascript隱藏顯示對象

<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對不起我的英文不好的語言

來源

2013-08-20 edvinedi

它正常工作對我來說：http://jsfiddle.net/fkling/nTczy/。請注意'tr'元素**必須是'table'（'thead'，'tbody'，'tfoot'）元素的子元素，它們不能是'div'的子元素。 –

你有css嗎？ –

我有檢查這個代碼工作。請刪除瀏覽器中的緩存。 – Chinmay235

嗯，你的周圍包裹是表的基礎上元素的股利。基本上你的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

來源

2013-08-20 15:10:18

謝謝！謝謝！ – edvinedi

@詹姆斯。提高你一個捕捉不良的HTML ...我錯過了缺少表格標籤！ – Epiphany

因爲你已經產生無效的HTML的基本結構。您不能將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>"; 
// 
?>

來源

2013-08-20 15:10:44 Craig

首先，HTML。將你的函數傳遞給select對象，但是在javascript函數中確定所選值而不是HTML。簡化您的選擇，如下所示。附加的id屬性並不是必需的，它只是很好的編程實踐，現在提供一個可以使用的參考。

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

現在您可以確定使用javascript的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'; 
    } 
}

來源

2013-08-20 15:26:17 Epiphany

Javascript隱藏顯示對象

回答

相關問題