通过点击切换文本框内容的脚本示例

定义一个字符串为内容的数组,每一行的多个文本框为一组,要求点击切换内容,且内容不重复.

代码

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3  <head>
4   <title> New Document </title>
5   <script>
6 var lastRowIndex=0;//上次变化行号
7 var opt;
8 var idPrefix="ToToChoiceOrder";
9 function changeOrder(r,c)
10 {
11   var optTmp=new Array();
12   opt=['A','B','C','D'];
13   if(1==c){
14     //如果点击的是首,要清空次末,记录首现在的值
15     document.getElementById(idPrefix+r+eval(c+1)).value="";
16     document.getElementById(idPrefix+r+eval(c+2)).value="";
17     optTmp.unshift(document.getElementById(idPrefix+r+c).value);
18   }
19   else if(2==c){
20     //如果点击的是次,要清空末,记录首次现在的值
21     document.getElementById(idPrefix+r+eval(c+1)).value="";
22     optTmp.unshift(document.getElementById(idPrefix+r+eval(c-1)).value);
23     optTmp.unshift(document.getElementById(idPrefix+r+c).value);
24   }
25   else if(3==c){
26     //如果点击的是末,记录首次末现在的值
27     optTmp.unshift(document.getElementById(idPrefix+r+eval(c-2)).value);
28     optTmp.unshift(document.getElementById(idPrefix+r+eval(c-1)).value);
29       optTmp.unshift(document.getElementById(idPrefix+r+c).value);
30   }
31   //alert("现在已有的选项是"+optTmp);
32   tmp=optTmp.join();
33   count=0;
34   len=opt.length;
35   while(count<len){
36     //alert("当前循环检查的值是"+opt[0]);
37     if(-1 != tmp.indexOf(opt[0])){
38       //alert("开头的值"+opt[0]+"已被选择");
39       opt.shift();
40       //alert("去掉后的选项有"+opt);
41       if(optTmp.length==count) break;
42       //opt.splice(i,1);
43     }else{
44       t=opt.shift();
45       //alert("去掉开头的值"+t);
46       opt.push(t);
47       //alert("加到尾部的值"+t);
48     }
49     //alert(opt);
50     count++;
51   }
52   document.getElementById(idPrefix+r+c).value= opt[0]?opt[0]:'';
53 }
54  </script>
55  </head>
56  <body>
57   <table width="120px" border="0" align="center" cellpadding="0" cellspacing="1" class="SmallFont">
58   <tr>
59     <td bgcolor="#C0D2EB"><div align="center" class="STYLE15">顺序</div></td>
60     <td bgcolor="#C0D2EB"><div align="center" class="STYLE15">首</div></td>
61     <td bgcolor="#C0D2EB"><div align="center" class="STYLE15">次</div></td>
62     <td bgcolor="#C0D2EB"><div align="center" class="STYLE15">末</div></td>
63
64   </tr>
65   <tr  align="center">
66     <td width="20" height="25"><div align="center" class="matchno">1</div></td>
67      <td width="19"><div align="center">
68     <input type="text" id="ToToChoiceOrder11" name="ToToChoiceOrder11" readonly="readonly"  size="1" value="3" class="FSInput1" onclick="changeOrder(1,1)" />
69     </div></td>
70     <td width="19"><div align="center">
71       <input type="text" id="ToToChoiceOrder12" name="ToToChoiceOrder12" readonly="readonly"  size="1" value="" class="FSInput1" onclick="changeOrder(1,2)" />
72     </div></td>
73     <td width="19"><div align="center">
74       <input type="text" id="ToToChoiceOrder13" name="ToToChoiceOrder13" readonly="readonly"  size="1" value="" class="FSInput1" onclick="changeOrder(1,3)" />
75     </div></td>
76   </tr>
77   <tr  align="center">
78     <td width="20" height="25"><div align="center" class="matchno">2</div></td>
79
80     <td width="19"><div align="center">
81     <input type="text" id="ToToChoiceOrder21" name="ToToChoiceOrder21" readonly="readonly"  size="1" value="3" class="FSInput1" onclick="changeOrder(2,1)" />
82     </div></td>
83     <td width="19"><div align="center">
84       <input type="text" id="ToToChoiceOrder22" name="ToToChoiceOrder22" readonly="readonly"  size="1" value="" class="FSInput1" onclick="changeOrder(2,2)" />
85     </div></td>
86     <td width="19"><div align="center">
87       <input type="text" id="ToToChoiceOrder23" name="ToToChoiceOrder23" readonly="readonly"  size="1" value="" class="FSInput1" onclick="changeOrder(2,3)" />
88     </div></td>
89   </tr>
90   </table>
91  </body>
92 </html>
93

转载于:https://www.cnblogs.com/BeanHsiang/archive/2009/11/29/1613137.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/262243.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！