在程序中有时候我们需要根据选择来显示我们需要的信息,通过控制table中row的显示可以实现这样的功能.
<script language="javascript" type="text/javascript"> function changeRow(id, status) { document.getElementById("Row1").style.display ="none"; document.getElementById("Row2").style.display ="none"; document.getElementById("Row3").style.display ="none"; var elm = document.getElementById("Row"+id); if (!elm) return false; elm.style.display = (status == true) ? "" : "none"; } </script>
JavaScript
HTML
<script language="javascript" type="text/javascript"> function changeRow(id, status) { document.getElementById("Row1").style.display ="none"; document.getElementById("Row2").style.display ="none"; document.getElementById("Row3").style.display ="none"; var elm = document.getElementById("Row"+id); if (!elm) return false; elm.style.display = (status == true) ? "" : "none"; } </script>
Row1 |
Row2 |
Row3 |
JavaScript
<
script language
=
javascript
>
function changeRow(id, status) {
document.getElementById("Row1").style.display ="none";
document.getElementById("Row2").style.display ="none";
document.getElementById("Row3").style.display ="none";
var elm = document.getElementById("Row"+id);
if (!elm)
return false;
elm.style.display = (status == true) ? "" : "none";
}
</ script >
function changeRow(id, status) {
document.getElementById("Row1").style.display ="none";
document.getElementById("Row2").style.display ="none";
document.getElementById("Row3").style.display ="none";
var elm = document.getElementById("Row"+id);
if (!elm)
return false;
elm.style.display = (status == true) ? "" : "none";
}
</ script >
HTML
<
table
width
="100%"
border
="0"
>
< tr >
< td >
< select name ="select" onchange ="javascript: changeRow(this.value,true);" >
< option value ="0" > None </ option >
< option value ="1" > Row1 </ option >
< option value ="2" > Row2 </ option >
< option value ="3" > Row3 </ option >
</ select >
</ td >
</ tr >
< tr id =Row1 style ="display: none;" >
< td bgcolor ="#99FF00" > Row1 </ td >
</ tr >
< tr id =Row2 style ="display: none;" >
< td bgcolor ="#CCCC99" > Row2 </ td >
</ tr >
< tr id =Row3 style ="display: none;" >
< td bgcolor ="#FFCC99" > Row3 </ td >
</ tr >
</ table >
< tr >
< td >
< select name ="select" onchange ="javascript: changeRow(this.value,true);" >
< option value ="0" > None </ option >
< option value ="1" > Row1 </ option >
< option value ="2" > Row2 </ option >
< option value ="3" > Row3 </ option >
</ select >
</ td >
</ tr >
< tr id =Row1 style ="display: none;" >
< td bgcolor ="#99FF00" > Row1 </ td >
</ tr >
< tr id =Row2 style ="display: none;" >
< td bgcolor ="#CCCC99" > Row2 </ td >
</ tr >
< tr id =Row3 style ="display: none;" >
< td bgcolor ="#FFCC99" > Row3 </ td >
</ tr >
</ table >