-
-
-
-
-
- function DomUtils(){
- }
-
-
-
-
-
-
-
-
-
- DomUtils.move=function(fbox,tbox,fmsg,tmsg) {
- var id =0;
- if(fbox.options.length==0){
- alert(fmsg);
- return false;
- }
- for(var i=0; i<fbox.options.length; i++) {
- if(fbox.options[i].selected) {
- id = 1;
-
- var no = new Option();
- no.value = fbox.options[i].value
- no.text = fbox.options[i].text
- tbox.options[tbox.options.length] = no;
-
- fbox.options[i].value = ""
- fbox.options[i].text = ""
- }
- }
- if(id==0){
- alert(tmsg);
- return false;
- }
- DomUtil.bumpUp(fbox);
- }
-
-
-
-
-
-
-
- DomUtils.bumpUp=function(box) {
- for(var i=0; i<box.options.length; i++) {
- if(box.options[i].value == "") {
- for(var j=i; j<box.options.length-1; j++) {
- box.options[j].value = box.options[j+1].value;
- box.options[j].text = box.options[j+1].text;
- }
- var ln = i;
- break
- }
- }
- if(ln < box.options.length) {
- box.options.length -= 1;
- DomUtil.bumpUp(box);
- }
- }
-
-
-
-
-
-
-
-
- DomUtils.moveAll=function(fbox,tbox,msg){
- if(fbox.options.length==0){
- alert(msg);
- return false;
- }
- for(var i=0; i<fbox.options.length; i++) {
-
- var no = new Option();
- no.value = fbox.options[i].value
- no.text = fbox.options[i].text
- tbox.options[tbox.options.length] = no;
-
- fbox.options[i].value = ""
- fbox.options[i].text = ""
- }
- DomUtil.bumpUp(fbox);
- }
-
-
-
-
-
-
-
-
-
-
- DomUtils.changeCheckbox=function(parentCheckBoxName,childCheckBoxName,isChild){
-
- var childCheckboxs=document.getElementByName(childCheckBoxName);
-
- var parentCheckBox=document.getElementByName(parentCheckBoxName);
-
- if(!isChild){
- for (var j=0;j<childCheckboxs.length;j++){
- if ( childCheckboxs[j].type == "checkbox"){
- childCheckboxs[j].checked = parentCheckBox[0].checked;
- }
- }
- }
-
-
- var childNum = 0;
-
- var checkedNum = 0;
-
- for (var j=0;j<childCheckboxs.length;j++){
- if (childCheckboxs[j].type == "checkbox"){
- childNum++;
- if(childCheckboxs[j].checked){
- checkedNum++;
- }
- }
- }
-
- if(checkedNum == 0){
- parentCheckBox[0].checked = false;
- }else if(childNum != checkedNum){
- parentCheckBox[0].checked = false;
- }else if(childNum == checkedNum){
- parentCheckBox[0].checked = true;
- }
- return;
- }
-
-
-
-
-
-
-
-
-
- DomUtils.selectCheckbox=function(checkboxname,targetValue){
- var objs = document.getElementByName(checkboxname);
- if(objs){
- var array=targetValue;
- if(false==(targetValue instanceof Array)){
- array=new Array();
- array.push(targetValue);
- }
-
- for(var i=0;i<objs.length;i++){
- var obj=objs[i];
- if(existInArray(obj.value)){
- obj.checked=true;
- }
- }
- }else{
- alert('no checkbox named ['+checkboxname+']');
- return false;
- }
- return true;
- }
- DomUtils.existInArray=function(array,value){
- for(var i=0;i<array.length;i++){
- if(array[i]==value){
- return true;
- }
- }
- return false;
- }
-
-
-
-
-
-
-
-
-
- DomUtils.selectRadio=function(radioname,targetValue){
- var objs = document.getElementByName(radioname);
- if(objs){
- for(var i=0;i<objs.length;i++){
- var obj=objs[i];
- if(obj.value==targetValue){
- obj.checked=true;
- break;
- }
- }
- }else{
- alert('no radio named ['+radioname+']');
- return false;
- }
- return true;
- }
-
-
-
-
-
- DomUtils.selectOption=function(objId, targetValue){
- var obj = document.getElementById(objId);
- if(obj){
- var options = obj.options;
- if(options){
- var len = options.length;
- for(var i=0;i<len;i++){
- if(options[i].value == targetValue){
- options[i].defaultSelected = true;
- options[i].selected = true;
- return true;
- }
- }
- } else {
- alert('missing element(s)!');
- }
- } else {
- alert('missing element(s)!');
- }
- }
这几个方法用处在哪里呢?我分别举例说明一下:
DomUtils.move这个方法,适用于两个select选择框,比如A和B,要把A和B中的元素相互移动的情况,可能A是待选择的美女,B是你已选择的美女,那么你还想选几个的话,你就可以用DomUtils.move(A,B,'没美女可以选了','你还选美女啊')
DomUtils.changeCheckbox,适用于那种全选或者去掉全选的checkbox处理,例如:A是全选checkbox,剩下的全部是同名字的其他checkbox,如果你选择了A,那么其他的checkbox就默认全选,如果你取消了A就默认取消其他全部选项。如果你一个一个的选择了checkbox,当你选择完的时候,A也默认勾选上了。
DomUtils.selectCheckbox,这个适用于你有一个或者几个值,他们对应都是某个名字组下checkbox的值,自动让他们选中。
DomUtils.selectRadio 同上面一样,和制定值相等的radio才选择。
DomUtils.selectOption 这个是选择只有指定值的选项。
一般情况下,我们页面的功能都是增删改查, 当你修改某个页面的时候,你页面中可能会有这些元素出现,那么你可能就得选中某些值,那么用这些工具方法,一句JS代码就搞定了。岂不是很简单!呵呵,欢迎扔砖头!
分享到:
相关推荐
用于扩展Web表单的几个javascript插件.pdf
jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架,十分强大
看web技术的发展,一直朝着更高抽象的层次不停地前进。高层次抽象屏蔽了开发者设计业务底层的复杂度,提升了开发效率,减少了...本章将向读者介绍当下移动Web常用的几种开发方式,包含的类库框架有 Zepto、React和Vue.js。
下面要介绍的就是如何在 Android 设备上搭建一个 Web 服务器,这个 Web 服务器的功能有如下几点: 接受客户端文件上传、下载文件 动态 Http API,像 Java 的 Servlet 一样写接口 部署静态网站,例如纯Html,支持 ...
最近,我使用纯Javascript实现了一个批量修改文本框中的数据的功能,拖动鼠标即可选择页面上(包括GridView中)多个文本框,然后会自动弹出对话框要求用户输入新值。实现方法对TextBox没有侵入性,也不需要修改现有...
判断用户出入的整数是正数、负数还是0 用JAVAScript脚本语言设计,在一个input框中显示当前的年、月、日,当鼠标放上去时就变换为当前的时间显示
JS日历控件 挑选了好几十个觉得这个最好看 适合企业级web应用
近几年来,用户习惯、技术和开发方法极大地改变了Web应用的设计,但是Web本身并没有变化。本书展示了如何开发出遵循Web底层架构的应用。 作为一名Java程序员,在以客户端-服务器端架构开发Web应用时,如何应对各种...
42. 常用的几个按钮收集 91 43. 在WEB上从视图删除文档技巧 93 44. 在Domino Designer中使用XML数据 96 45. 在Domino Designer上执行XML 100 46. Show single category view, the next stage 107 47....
其中运用了ASP技术(Avtive Server Page)、ADO技术(ActiveX Data Object)、MS Access数据库技术、RegExp技术(Regular Expression 正则表达式)、VBScript及JavaScript脚本语言技术等等,并从几个不同的方面来对上述...
代码全部是JS,不带数据库,web版打兔子
本书以循序渐进的方式,通过大量的实例介绍WebGIS基础知识和如何使用ArcGIS API for JavaScript开始GIS,访问...此外,本书提供了几个开发框架,读者可在此基础上需加入专业的应用,从而实现Web GIS应用的快速开发。
42. 常用的几个按钮收集 91 43. 在WEB上从视图删除文档技巧 93 44. 在Domino Designer中使用XML数据 96 45. 在Domino Designer上执行XML 100 46. Show single category view, the next stage 107 47. Checkboxes in ...
这几年来,Rails一直在发展,这《Web开发敏捷之道:应用Rails进行敏捷Web开发(第3版)》也一直随它一起发展。和前两版一样,我们还是先带领读者一步步构造一个真实的应用程序,然后深入介绍Rails内建的各种特性;和前...
本次优化主要体现在以下几个方面: 1.实现数据库读写分离,便于部署多台数据库服务器实现数据库负载均衡; 2.针对所有数据库查询语句进行优化,重写数据分页的存储过程,为大数据量及超大数据库做好准备; ...
项目主页主要包括:搜索栏目、菜单、时间及新闻、焦点图、课程主要知识介绍、合作企业及网站底部等几个模块。 主要包括HTML、CSS、Javascript、DOM、BOM、AJAX等技术手段,用于解决web开发中的网页布局方面的问题。 ...
这个web项目一共撰写了大概十几个界面的代码,其中主要由首页、注册、登录以及几个锚链接对应的功能实现界面和单独的新闻界面所构成。同时我们把每个具体的css及JavaScript功能注释都放到了代码之前。 首页界面 ...
传统的单机版应用软件正在逐渐退出舞台,取而代之的是支持网络、支持多种数据信息(多媒体)的新一代网络版应用软件,而目前网络版软件中似乎存在着两种不同的趋势,一种是称为客户端——服务器的C/S结构应用系统,...
TOWeb将最新的HTML5,CSS3和JavaScript技术与响应式网页设计(RWD)方法相结合,以创建在任何设备上显示时都看起来非常棒的现代网站:智能手机,平板电脑,笔记本电脑,台式机,电视机! 简单直观 不需要技术...
最近几年,Web前端的发展非常迅速,并呈现出一片... 循序渐进地介绍了Web前端开发中的HTML、CSS、JavaScript编码实践方法,并同时介绍了Web移动端开发的实践。让读者能对Web前端开发有一个全面的理解和认知。