阅读文章

利用JavaScript控制table中row的显示

[日期:2006-05-26] 来源:csdn  作者: [字体: ]

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


阅读:
录入:blue1000

评论 】 【 推荐 】 【 打印
上一篇:用js写的一个跑马灯
下一篇:当鼠标移到单元格时背景变色
相关文章      
本文评论
发表评论


点评: 字数
姓名:

  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款