使用js可否将text框按几个一组集体隐藏或显示?(隐藏时组件还在页面上,只是不显示)

只写10个,超过的部分类推,代码如下:<html>
<head>
<script>
var N=5;
function sltOnChange()
{
var m=slt.selectedIndex*N;
var ipts=document.getElementsByName("ipt");
for(i=0;i<ipts.length;i++) {
if(i>=m && i<m+5) {
ipts[i].style.display="block";
}
else {
ipts[i].style.display="none";
}
}
}function init() {
sltOnChange();
}
</script>
</head>
<body onload="init()">
<input style=display:none name=ipt value=1>
<input style=display:none name=ipt value=2>
<input style=display:none name=ipt value=3>
<input style=display:none name=ipt value=4>
<input style=display:none name=ipt value=5>
<input style=display:none name=ipt value=6>
<input style=display:none name=ipt value=7>
<input style=display:none name=ipt value=8>
<input style=display:none name=ipt value=9>
<input style=display:none name=ipt value=10>
<select id=slt onchange="sltOnChange();">
<option>1-5</option>
<option>6-10</option>
</select>
</body>
</html>

解决方案 »

  1.   

    <html>
    <head>
    <script language=javascript>
    function change()
    {
        if(document.all.test.value == 1){
    document.all.list1.style.display = "block";
    document.all.list2.style.display = "none";
    document.all.list3.style.display = "none";
    }
    if(document.all.test.value == 2){
    document.all.list1.style.display = "none";
    document.all.list2.style.display = "block";
    document.all.list3.style.display = "none";
    }
    if(document.all.test.value == 3){
    document.all.list1.style.display = "none";
    document.all.list2.style.display = "none";
    document.all.list3.style.display = "block";
    }
    if(document.all.test.value == 0){
    document.all.list1.style.display = "none";
    document.all.list2.style.display = "none";
    document.all.list3.style.display = "none";
    }
    }
    </script>
    </head>
    <body>
    <center>
    <table width="340" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <select name="test" onChange="change();">
        <option></option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
      </select>  
        </td>  
      </tr>
    </table>
    <table width="340" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td height="30">
      <div id="list1" style="display:none">
          <input name="textfield1" type="text" value="1">
      </div>
    </td>
      </tr>
      <tr>
        <td height="30">
          <div id="list2" style="display:none">
          <input name="textfield2" type="text" value="2">
      </div>
    </td>
      </tr>
      <tr>
        <td height="30">
          <div id="list3" style="display:none">
          <input name="textfield3" type="text" value="3">
      </div>
    </td>
      </tr>
    </table></center>
    </body>
    </html>
      

  2.   

    <script language='javascript'>
    //buttons
    var inputs;
    for(i=0; i<240; i++)
    {
    var inputvalue = i+1;
    inputs+="<input type=button value=" + inputvalue + " id= " +  i  + ">";
    }
    //select
    inputs += "<br><select name='myselect' onclick='hiddeninput(this)'>";
    for(i=0; i<240/5; i++)
    {
    var from=i*5+1;
    var to=i*5+5;
    inputs +="<option value=" + i + ">" + from + "~" + to + "</option>";
    }
    inputs += "</select>";
    //show the objects
    document.write(inputs);//change the select
    function hiddeninput(obj)
    {
     
    for(i=0; i < 240; i++)
    {
       document.getElementById(i).style.display="none";
    }var select = obj.value ;
    var from=eval(select*5);
    var to=eval(select*5+5);for(i=from; i < to; i++)
    {
    document.getElementById(i).style.display="";
    }
    }</script>
    <body></body>
      

  3.   

    <script language='javascript'>
    //buttons
    var inputs="";
    for(i=0; i<240; i++)
    {
    var inputvalue = i+1;
    inputs+="<input type=button value=" + inputvalue + " id= " +  i  + ">";
    }
    //select
    inputs += "<br><select name='myselect' onclick='hiddeninput(this)'>";
    for(i=0; i<240/5; i++)
    {
    var from=i*5+1;
    var to=i*5+5;
    inputs +="<option value=" + i + ">" + from + "~" + to + "</option>";
    }
    inputs += "</select>";
    //show the objects
    document.write(inputs);//change the select
    function hiddeninput(obj)
    {
     
    for(i=0; i < 240; i++)
    {
       document.getElementById(i).style.display="none";
    }var select = obj.value ;
    var from=eval(select*5);
    var to=eval(select*5+5);
    for(i=from; i < to; i++)
    {
    document.getElementById(i).style.display="";
    }
    }
    </script>
      

  4.   


    <script language="javascript">
    var aDisplyNum = 0;
    function show(v) {
    if (v == "") {
    return;
    }
    var value = parseInt(v);
    if (value < 0) {
    return;
    }
    for (var i = 0;i < 5 ;i ++ ) {
    setDisplay(value + i, true);
    setDisplay(aDisplyNum + i, false);
    }
    aDisplyNum = value;
    } function setDisplay(num, display) {
    if (isNaN(num) || num < 0) {
    return;
    }
    var aName = "text";
    if (num < 10) {
    aName += "00" + num;
    } else if (num < 100) {
    aName += "0" + num;
    } else {
    aName += num;
    }
    var oText = document.getElementById(aName);
    if (typeof(oText) == "object" && oText != null) {
    if (display == true) {
    oText.style.display = "block";
    } else {
    oText.style.display = "none";
    }
    }
    }
    </script><select id="s" onchange="show(this.value);">
    <option value=""></option>
    <option value="0">1-5</option>
    <option value="5">6-10</option>
    <option value="10">11-15</option>
    </select><form id="form1">
    <input id="text000" type="text" style="display:block" value="0"/>
    <input id="text001" type="text" style="display:block" />
    <input id="text002" type="text" style="display:block" />
    <input id="text003" type="text" style="display:block" />
    <input id="text004" type="text" style="display:block" />
    <input id="text005" type="text" style="display:none" value="5"/>
    <input id="text006" type="text" style="display:none" />
    <input id="text007" type="text" style="display:none" />
    <input id="text008" type="text" style="display:none" />
    <input id="text009" type="text" style="display:none" />
    <input id="text010" type="text" style="display:none" value="10" />
    <input id="text011" type="text" style="display:none"/>
    <input id="text012" type="text" style="display:none" />
    <input id="text013" type="text" style="display:none" />
    <input id="text014" type="text" style="display:none" />
    </form>
      

  5.   

    <script language='javascript'>
    //buttons
    var inputs="";
    for(i=0; i<240; i++)
    {
    var inputvalue = i+1;
    //把button改为text
    inputs+="<input type=text value=" + inputvalue + " id= " +  i  + ">";
    }
    //select
    inputs += "<br><select name='myselect' onclick='hiddeninput(this)'>";
    for(i=0; i<240/5; i++)
    {
    var from=i*5+1;
    var to=i*5+5;
    inputs +="<option value=" + i + ">" + from + "~" + to + "</option>";
    }
    inputs += "</select>";
    //show the objects
    document.write(inputs);//change the select
    function hiddeninput(obj)
    {
     
    for(i=0; i < 240; i++)
    {
       document.getElementById(i).style.display="none";
    }var select = obj.value ;
    var from=eval(select*5);
    var to=eval(select*5+5);
    for(i=from; i < to; i++)
    {
    document.getElementById(i).style.display="";
    }
    }
    </script>
    呵呵，上面的是button, 把type改为text就可以了。
      

  6.   

    十分感谢大家的热心,但现在有个问题就是,每当select改变的时候,5个一组的文本框是改变了,但这一组文本框会向上或向下串行,请问,当文本框被置为diaplay:none后还要占行吗?不能和hidden一样不占行吗?
      

  7.   

    diaplay:none本来就是不占行的,你试过代码了没?
    我给你的代码那么短, 你只要简单的复制粘贴,试一下,就可以了,这样你都不做,那你实在太懒了.别让大家BS你啊.
      

  8.   

    我可能理解错你的意思了，你是要在原位置显示的吧？
    那就把所有的 display:none 替换为 visibility: hidden 就可以了。
      

  9.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head><body>
    <table width="500" border="1">
      <tr>
        <td height=20 width="500"><div id="td1" style=" display:''">
          <input type="text" name="textfield">
          <input type="text" name="textfield6">
          <input type="text" name="textfield11">
        </div></td>
      </tr>
      <tr>
        <td height=20><div id="td2" style=" display:none">
          <input type="text" name="textfield2">
          <input type="text" name="textfield7">
          <input type="text" name="textfield12">
        </div></td>
      </tr>
      <tr>
        <td height=20><div id="td3" style=" display:none">
          <input type="text" name="textfield3">
          <input type="text" name="textfield8">
          <input type="text" name="textfield13">
      </div></td>
      </tr>
      <tr>
        <td height=20><div id="td4" style=" display:none">
          <input type="text" name="textfield4">
          <input type="text" name="textfield9">
          <input type="text" name="textfield14">
        </div></td>
      </tr>
      <tr>
        <td height=20><div id="td5" style=" display:none">
          <input type="text" name="textfield5">
          <input type="text" name="textfield10">
          <input type="text" name="textfield15">
        </div></td>
      </tr>
    </table>
      <select name="select" onChange="showchange(this.selectedIndex)">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      
      </select>
    <script>
    var old_obj
    old_obj=1;
    function showchange(i){
    i=i+1
    eval("td"+old_obj+".style.display='none'")
    eval("td"+i+".style.display=''")
    old_obj=i
    }
    </script>
    </body>
    </html>
      

  10.   

    利用td来占行，用div来控制一组input的显隐。
    关键是使用了old_obj来记录上一次所显示的对象索引。传递新的进来后，先把原先显示的隐藏，然后再显示新的。并且记录当前显示。