[JavaScript]利用JavaScript控制table中row的显示

   在程序中有时候我们需要根据选择来显示我们需要的信息,通过控制table中row的显示可以实现这样的功能.
 

NoneRow1Row2Row3

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 >

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 >

转载于:https://www.cnblogs.com/rippleyong/archive/2006/05/26/410199.html