通过点击切换文本框内容的脚本示例
2024-05-12 07:56:35
定义一个字符串为内容的数组,每一行的多个文本框为一组,要求点击切换内容,且内容不重复.
代码
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
转载于:https://www.cnblogs.com/BeanHsiang/archive/2009/11/29/1613137.html
通过点击切换文本框内容的脚本示例相关推荐
- php 修改input内容,JS简单获取并修改input文本框内容的方法示例
这篇文章主要介绍了JS简单获取并修改input文本框内容的方法,结合实例形式分析了JavaScript针对页面元素的获取.赋值等相关操作技巧,需要的朋友可以参考下 本文实例讲述了JS简单获取并修改in ...
- html5点击复制文本框内容,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 ...
- 本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
- 点击按钮复制文本框内容
点击按钮复制文本框内容 复制文本框内容的方法如下: function Copy(){var e=document.getElementById("content");//对象是co ...
- java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...
- vba 判断文本框内容是否为空_校验数据一旦失败，VBA代码自动控制焦点返回的另一备选方案...
大家好,我们今日继续讲解VBA代码解决方案的第95讲内容:如果文本框的录入校验不能通过,光标仍返回文本框中的另一方案.在上一讲中我讲了利用EXIT事件中的Cancel 参数的设置来达到我们的目的(值是 ...
- python tkinter输入框_python TKinter获取文本框内容的方法
python TKinter获取文本框内容的方法 更新时间:2018年10月11日 11:36:08 作者:biubiuzzz 今天小编就为大家分享一篇python TKinter获取文本框内容的方法 ...
- swing获取文本框内容_营销管理培训课件，大客服销售策略和技巧，全内容PPT拿来就用...
Hello大家好,我是帮帮.今天跟大家分享一张营销管理培训课件,大客服销售策略和技巧,全内容PPT拿来就用. 为了让大家能更稳定的下载模板,我们又开通了全新下载方式(见文章末尾),以便大家可以轻松获得 ...
- vba 判断文本框内容是否为空_Excel/VBA编程用户交互函数(二)——InputBox()函数和inputbox方法...
在上一篇文章Excel/VBA编程用户交互函数(一)--msgbox()函数中,小伙伴们了解了消息弹窗的知识,今天我们来学习一下Excel/VBA编程的第二个用户交互函数Inputbox()函数及In ...
最新文章
- Android在Java获取组件,在Java中解析HTML以获取Android应用
- 《计算机组成原理》第05章在线测试
- U3D 如何计算一个UI四个角的绝对坐标
- java登陆界面工具_javaee编写登陆界面
- NDK/JNI01--NDK下载配置
- node.js express 启用 https
- 内核代码架构图 ：systemtap函数选择点
- 算法高级（33）-拓扑排序-maven依赖关系的确定
- 首发Android 13！谷歌Pixel 7 Pro渲染图曝光：后置相机模组吸睛
- pla算法 matlab,PAL算法原理及代码实现
- redhat6.5配置阿里云yum源
- aixdb2安装手册_AIX下安装db2数据库步骤
- POJ 3111 K Best 贪心 二分
- rt1052 usb速率_rt1052 spi flash 读数据好慢
- java List 排序 Collections.sort()
- 基于transformor的拼音转汉字语言模型。
- Flutter-------写一个app启动页
- RNA-seq：最长转录本提取
- python多线程多个cpu_为什么python的多线程不能利用多核CPU？
- cstring转int(long转CString)