js动态控制表单的tr，td的显示和隐…

原文：http://blog.csdn.net/shaobingj126/article/details/6524815

 

无论是事先写好的，还是动态生成的，要找到指定的tr或td都必须知道其相关的一个属性，未必必须是id或name，然后无论是在一个table还是多个
table都可以通过document.getElementsByTagNames( "tr
")或td，取得集合，……再根据知道的属性再找，最后设置显示/隐藏

 

方法一：

document.getElementByIdx_x_x( "控件ID ").style.visibility= "hidden
";

document.getElementByIdx_x_x( "控件ID ").style.visibility= "visible
";

方法二：

document.getElementByIdx_x_x( "控件ID ").style.display= "none ";

document.getElementByIdx_x_x( "控件ID ").style.display= "inline ";

方法一隐藏后   页面的位置还被控件占用   只是不显示
  类似于.net验证控件的Display=Static

方法二隐藏后   页面的位置不被占用  
类似于.net验证控件的Display=Dynamic

 

我写的一个根据下拉菜单的不同选择值来显示下边的一个input表单的显示和隐藏

js：

function listchange(){

    

    var
sel=document.getElementsByName('tasklist_type');

    for(var
i=0;i

    {

    
if(tasklist_type.options[i].selected)

    
{

     
if(tasklist_type.options[i].value==0){

       
document.getElementByIdx_x_x( "tasklistoriginalno").style.display=
"none";

       document.getElementByIdx_x_x("tasklist_originalno").value
= "";

     
}

     
if(tasklist_type.options[i].value==1){

       
document.getElementByIdx_x_x( "tasklistoriginalno").style.display=
"";

     
}

    
}

    }

   
 

}

 

html：

    
   
   
  

   
   
   
   
 

                

   
   
   
 

   
   
   
 

              

              

             

 

 

---------------------------------------------------------------------------------------------

上面的代码在IE6和FF下都能成功实现效果，但是在IE8下不能得到相应的效果，原因出在在IE8下用上面的代码无法获取到下拉列表的值，经测试下面的代码可以：

js

function listchange()

{   

   var
sel=document.getElementsByName("tasklist_type")[0].value;
//获取下拉表单的value值

   

   
if(sel=='0')

    
{

         
document.getElementByIdx_x_x( "tasklistoriginalno").style.display=
"none"; //隐藏id为tasklistoriginalno的td

         
document.getElementByIdx_x_x("tasklist_originalno").value = "";
//并将其值赋为空

    
}

               

   
if(sel=='1')

    
{

        
document.getElementByIdx_x_x( "tasklistoriginalno").style.display= "";
//当下拉表单的值为0时显示

    
}

}

 

 

 

下面是测试的例子，也是我在网上看到的，我们将其copy到保存到一个html页面中在IE8下打开，OK：