通过点击切换文本框内容的脚本示例
定义一个字符串为内容的数组,每一行的多个文本框为一组,要求点击切换内容,且内容不重复.
代码
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
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
