js动态控制表单的tr,td的显示和隐藏分析

虾米哥 阅读:156 2021-03-31 23:25:39 评论:0


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

 

方法一:
document.getElementById( "控件ID ").style.visibility= "hidden ";
document.getElementById( "控件ID ").style.visibility= "visible ";
方法二:
document.getElementById( "控件ID ").style.display= "none ";
document.getElementById( "控件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<tasklist_type.options.length;i++)
    {
     if(tasklist_type.options[i].selected)
     {
      if(tasklist_type.options[i].value==0){
        document.getElementById( "tasklistoriginalno").style.display= "none";
        document.getElementById("tasklist_originalno").value = "";

/*上面红色的这句话用处很大的,因为你想隐藏掉下面的一个表单,那么这个表单的值也就不需要写入数据库了,所以记得在隐藏的同时将被隐藏表单的值清空;当然要是你不嫌麻烦的话在表单的数据提交到php的数据处理页面的时候对 tasklist_type根据其值是0还是1来行进判断写不写入 tasklist_originalno 的值 */
      }
      if(tasklist_type.options[i].value==1){
        document.getElementById( "tasklistoriginalno").style.display= "";
      }
     }
    }
     
}

 

html:

                <tr height='30'>
                 <td>&nbsp;<{$lang_tasklist_type}>: </td>
                 <td>
                    <select name="tasklist_type" id="tasklist_type"  οnchange="listchange();return false;">
                        <option value="null" ><{$lang_tasklist_sel}></option>
                        <option value="0" ><{$lang_tasklist_common}></option>
                        <option value="1" ><{$lang_tasklist_supplement}></option>
                    </select>
                </td>
             </tr>
             <tr height='30'  id='tasklistoriginalno'>
               <td>&nbsp;<{$lang_tasklist_originalno}>:</td>
               <td colspan='3'><input type='text'  id='tasklist_originalno' name='tasklist_originalno'/></td>
             </tr>

 

 

 

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

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

js

function listchange()
{   
    var sel=document.getElementsByName("tasklist_type")[0].value; //获取下拉表单的value值
   
    if(sel=='0')
     {
          document.getElementById( "tasklistoriginalno").style.display= "none"; //隐藏id为tasklistoriginalno的td
          document.getElementById("tasklist_originalno").value = ""; //并将其值赋为空
     }
               
    if(sel=='1')
     {
         document.getElementById( "tasklistoriginalno").style.display= ""; //当下拉表单的值为0时显示
     }
}

 

 

 

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

<!--有表单---->

< %@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  </head>
  <script type="text/javascript">
      function optChange(){
        var name=document.areaName.area.options[document.areaName.area.selectedIndex].text;
        alert(name);
      }
  </script>
  <body>
    <form name="areaName">
    <select name="area" οnchange="optChange()">
     <option  value="上海">上海</option>
     <option value="南京">南京</option>
     <option value="北京">北京</option>
     <option value="成都">成都</option>
     <option value="长沙">长沙</option>
     <option value="山西">山西</option>
    </select>
    </form>
  </body>
< /html>

< !---无表单--->



< %@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  </head>
  <script type="text/javascript">
      function optChange(){
       var name=document.getElementsByName("area")[0].value;
        alert(name);
      }
  </script>
  <body>
    <select name="area" οnchange="optChange()">
     <option  value="上海">上海</option>
     <option value="南京">南京</option>
     <option value="北京">北京</option>
     <option value="成都">成都</option>
     <option value="长沙">长沙</option>
     <option value="山西">山西</option>
    </select>
  </body>
< /html

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号