`
floger
  • 浏览: 213493 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

妙用javascript(2)

阅读更多

12:得用JS在WEB页面中动态增加行列:
这里主要用到了innerHTML, cells,rows,appendChild等一些方法与属性有了它们基本上就OK了,更多可以参考HTML的参考手册,可以做到如在DW更改界面一样,感觉很爽(比如更改对象的title ,id ,style, name)!

dateTr = document.getElementById("tr_name");//它实际上是一列也就是<tr></tr>'tr_name'是我自定义
    NewTr = document.all.dyzmx.cloneNode(true);
    NewTr.style.display 
= "block";
    
var cur_lxr_xm = dateTr.parentNode.rows[1].cells[1].innerHTML;
    dateTr.parentNode.appendChild(NewTr.cloneNode(
true));
    
var added_new_tr = dateTr.parentNode.lastChild;    
..

主要用到了cloneNode方法,其它更多可以参考关于HTML的对象介绍,然后再通过appendChild来增加一行(在此是增加一行).当然也可以自己定义一些元素来初始化innerHTML,as :

html = " <INPUT type=text style=\"width:30px;\" value="+k+" name=\"rwbh\" maxlength=3>";
        start.getElementsByTagName(
"tr")[k].firstChild.innerHTML = html;

顺便说一下关于删除:

var child_len = dateTr.parentNode.rows.length-1;
        
for(c2=child_len; c2>0; c2--){
            
var rows = [];
            
if(name=='lxr')
                
if(dateTr.parentNode.rows[c2].title=='lxr_data'){
                    rows.push(dateTr.parentNode.rows[c2]);
                    
for(var i=0;i<rows.length;i++){
                        rows[i].parentNode.removeChild(rows[i]);
                    }

}        
                }

注意这种方法删除时,一不小心不犯错了.一方面for(c2=child_len; c2>0; c2--)应该是递减的方式来遍历(因为rows里面push的时候,与删除的时候节点是反向的,当然假如取rows的时候反向取也OK的),另一方面 dateTr.parentNode.rows.length-1不可以直接放到for里面(因为 dateTr.parentNode.rows.length-1的长值每在for里面跑一次就变一次,当然是变小啦).

所以也可以如下处理:

/**//******************************************************************
@name delRow---为******删除选项中行
@parameters    null
@retrun null
@author zhangyinxin
*****************************************************************
*/

function delRow(){
    
var checkboxs = document.getElementsByName("checkspecial");
    
var rows = [];
    
for(var i=0;i<checkboxs.length;i++){
        
if(checkboxs[i].checked && checkboxs[i].parentNode.parentNode.title!='tmp'){
            rows.push(checkboxs[i].parentNode.parentNode);
        }

    }

    
for(var i=0;i<rows.length;i++){
        rows[i].parentNode.removeChild(rows[i]);
    }

}

我这儿用到了复选框,当然这并不影响删除的效果实现,它不过是一种删除条件罢了(比如title也是哦)

13:第一次见到这样的自定义函数:

function $() {
  
var elements = new
 Array();

  
for (var i = 0; i < arguments.length; i++
{
    
var element =
 arguments[i];
    
if (typeof element ==
 'string')
      element 
=
 document.getElementById(element);

    
if (arguments.length == 1
)
      
return
 element;

    elements.push(element);
  }


  
return elements;
}



应用如下:

this.removeRow  =  function(_id){  
                       
var  row  =  $(this.id  +  "_row_"+
_id);  
                       
if(!row)return
;  
                       row.parentNode.removeChild(row);  
           }
 

感觉蛮不错!(原来这些是protype.js中的东东呢,呵呵 这二天看了下prototype.js原来它是为ruby写的框架,不过这个东东确实不错哦!)

14:javascript验证表单时常用

"^-[0-9]*[1-9][0-9]*$"  //负整数

"^-?\d+$"    //整数

"^\d+(\.\d+)?$"  //非负浮点数(正浮点数 + 0)

"^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$"  //正浮点数

"^((-\d+(\.\d+)?)|(0+(\.0+)?))$"  //非正浮点数(负浮点数 + 0)

"^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"  //负浮点数

"^(-?\d+)(\.\d+)?$"  //浮点数

"^[A-Za-z]+$"  //由26个英文字母组成的字符串

"^[A-Z]+$"  //由26个英文字母的大写组成的字符串

"^[a-z]+$"  //由26个英文字母的小写组成的字符串

"^[A-Za-z0-9]+$"  //由数字和26个英文字母组成的字符串

"^\w+$"  //由数字、26个英文字母或者下划线组成的字符串

"^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"    //email地址

"^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$"  //url


呵呵 我一天添一些JS上来,可惜朋友们看不到,因为这"贴子"沉下去了.没办法,可是它们真的帮我不少忙,我自己的也常到这儿来取经....

以后不用序号了,直接改用日期
06.7.18:今天我用JS产生一个checkbox,别的都没事,就是在设置默认让它选中时花了些时间:
以下是代码:
input = document.createElement("input");
   input.setAttribute("type","checkbox");
   //input.defaultChecked = true;---此语句可以直接在产生checkbox的时候让它默认选中
   input.setAttribute("value","1");
   $('kdydx').appendChild(input);
   $('kdydx').lastChild.setAttribute("checked","ckecked");//要想通过setAttribute来设置,刚必须在appendChild之后
关于它的答案我在
http://forum.java.sun.com/thread.jspa?threadID=628633&messageID=3606303找到的。

//打印
function send_dy(){
 var bdhtml=window.document.body.innerHTML;
 sprnstr="<!--startprint-->";
 eprnstr="<!--endprint-->";
 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+17);
 prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
 window.document.body.innerHTML=prnhtml;
 window.print();
 window.document.body.innerHTML=bdhtml;
}

/**
 调用IE的打印控件打印TABLE
 tb为要打印的TABLE的ID
 pSzize为一页的行数
**/

function tablePrint(tb,pSize,title){
 var nw = window.open('','','top=50,left=100,resizable=yes,width=800,height=600,titlebar=yes,menubar=no,status=no,location=no,scrollbars=yes');
 nw.document.open("text/html","GB2312")
 nw.document.write("<style media=print>");
 nw.document.write(".Noprint{display:none;}");//不需要打印的样式
 nw.document.write(".PageNext{page-break-after: always;}");//
 nw.document.write(".data_Table{border-color:#000000;border-width:1px;border-style:solid;}");
 nw.document.write("</style>");
 nw.document.write("<style>");
 nw.document.write(".Mb_Input_Button{height:20px;border-left:1px solid #DAE8F7; border-top:1px solid #DAE8F7; border-right:1px solid #A0C4EB;border-bottom:1px solid #A0C4EB;background-color:#E4EBF3;padding-left:5px;padding-right:5px;margin:4px 5px 2px 0px;}");
 nw.document.write(".noShow{display:none;}");//打印预览时不需要显示的样式
 nw.document.write("</style>");
 nw.document.write("<HEAD><TITLE>&nbsp;</TITLE></HEAD>");
 nw.document.write("<body>");
 nw.document.write("<div align='right'>");
 nw.document.write("<input type=button value='打印' onclick='document.all.WebBrowser.ExecWB(6,1);' class='NOPRINT Mb_Input_Button'>&nbsp;");
  nw.document.write("<input type=button value='页面设置' onclick='document.all.WebBrowser.ExecWB(8,1);' class='NOPRINT Mb_Input_Button'>&nbsp;");
  nw.document.write("<input type=button value='打印预览' onclick='document.all.WebBrowser.ExecWB(7,1);' class='NOPRINT Mb_Input_Button'>&nbsp;");
 nw.document.write("</div>");
 nw.document.write("<OBJECT  id=WebBrowser  classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2  height=0  width=0 VIEWASTEXT></OBJECT>");
 nw.document.write("<div align='center' style='margin-top:5; margin-bottom:5'><b>"+title+"</b></div>");
 var obj=document.getElementById(tb);
 var trObj=obj.childNodes[0].childNodes;
 for(i=0;i<trObj.length;i++){
   if((i!=0)&&(i%pSize==0)){
   trObj[i].className="PageNext";
   }
  }
 nw.document.write(document.getElementById(tb).outerHTML);
 nw.document.write("</body>");
}

/**
 调用IE的打印控件打印对象
 tb为要打印的TABLE的ID
 pSzize为一页的行数
**/
function objPrint(tb,title){
 var nw = window.open('','','top=50,left=100,resizable=yes,width=800,height=600,titlebar=yes,menubar=no,status=no,location=no,scrollbars=yes');
 nw.document.open("text/html","GB2312")
 nw.document.write("<style media=print>");
 nw.document.write(".Noprint{display:none;}");//不需要打印的样式
 nw.document.write(".PageNext{page-break-after: always;}");//
 nw.document.write(".data_Table{border-color:#000000;border-width:1px;border-style:solid;}");
 nw.document.write("</style>");
 nw.document.write("<style>");
 nw.document.write(".Mb_Input_Button{height:20px;border-left:1px solid #DAE8F7; border-top:1px solid #DAE8F7; border-right:1px solid #A0C4EB;border-bottom:1px solid #A0C4EB;background-color:#E4EBF3;padding-left:5px;padding-right:5px;margin:4px 5px 2px 0px;}");
 nw.document.write(".noShow{display:none;}");//打印预览时不需要显示的样式
 nw.document.write("</style>");
 nw.document.write("<HEAD><TITLE>&nbsp;</TITLE></HEAD>");
 nw.document.write("<body>");
 nw.document.write("<div align='right'>");
 nw.document.write("<input type=button value='打印' onclick='document.all.WebBrowser.ExecWB(6,1);' class='NOPRINT Mb_Input_Button'>&nbsp;");
  nw.document.write("<input type=button value='页面设置' onclick='document.all.WebBrowser.ExecWB(8,1);' class='NOPRINT Mb_Input_Button'>&nbsp;");
  nw.document.write("<input type=button value='打印预览' onclick='document.all.WebBrowser.ExecWB(7,1);' class='NOPRINT Mb_Input_Button'>&nbsp;");
  nw.document.write("<input type=button value='关闭' onclick='document.all.window.close();' class='NOPRINT'>");
 nw.document.write("</div>");
 nw.document.write("<OBJECT  id=WebBrowser  classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2  height=0  width=0 VIEWASTEXT></OBJECT>");
 nw.document.write("<div align='center' style='margin-top:5; margin-bottom:5'><b>"+title+"</b></div>");
 nw.document.write(document.getElementById(tb).outerHTML);
 nw.document.write("</body>");
}

/**
 中文英文混合时字符串的长度计算
 一个汉字2个字节
**/
String.prototype.length2 = function() {
    var cArr = this.match(/[^x00-xff]/ig);
    return this.length + (cArr == null ? 0 : cArr.length);
}
...   ....

分享到:
评论

相关推荐

    众妙之门——JavaScript与jQuery技术精粹

     《众妙之门——JavaScript与jQuery技术精粹》最大的价值在于其结合大量实例的生动方式,详细阐述了使用JavaScript和jQuery时应掌握的知识和技巧,以及作者通过实践掌握的各种秘诀,可帮助开发人员提升自身水平,向...

    众妙之门 JavaScript与jQuery技术精粹

    2. 移动端优化:探讨在移动设备上使用JavaScript和jQuery的最佳实践,如考虑性能和触屏事件。 3. jQuery与其他库的集成:如与Bootstrap、AngularJS等框架结合使用,提升开发效率。 4. 模块化和打包工具:学习使用...

    多姿多彩我拥有:—妙用JavaScript实现网页特效.pdf

    虽然CSS样式表通常是首选,但有时也可以用JavaScript来实现。例如,可以插入一个没有边框的表格,并通过JavaScript动态设置边框宽度和间距: ```html &lt;!-- 表格内容... --&gt; ``` JavaScript允许开发者实现各种...

    众妙之门 JavaScript与jQuery技术精粹,完整扫描版(有目录和介绍)

    《众妙之门——JavaScript与jQuery技术精粹》出自世界知名Web设计网站Smashing Magazine,其中的文章是来自全球顶级设计师的精华总结。全书共分为两大部分,第一部分阐述JavaScript的实战经验,共7章,内容涉及...

    js的另一妙用

    2. **Cordova/PhoneGap**: 这是两个流行的框架,它们基于WebView,使得开发者可以使用HTML、CSS和JavaScript编写跨平台的移动应用。通过插件系统,开发者可以访问Android的原生功能,如相机、GPS等。 3. **React ...

    html+css+javascript

    HTML、CSS和JavaScript的结合使用,形成了大前端开发的基础框架。HTML负责内容的结构,CSS负责样式的设计,JavaScript则负责动态交互和逻辑处理。这种三层分离的模式使得开发更加模块化,提高了代码的可维护性和重用...

    JavaScript与jQuery技术精粹

    《众妙之门:JavaScript与jQuery技术精粹》出自世界知名Web设计网站Smashing Magazine,其中的文章是来自全球顶级设计师的精华总结。全书共分为两大部分,第一部分阐述JavaScript的实战经验,共7章,内容涉及...

    javascript

    ### 关于JavaScript的妙用 #### 1. 动态效果 JavaScript可以用来创建各种动态效果,如动画、过渡等。例如,在给定的部分内容中,有一段JavaScript代码用于创建一个动态的图像布局,通过调整图像的位置来实现动画...

    html javascript js css

    网页制作中隐藏域的妙用 在网页制作中,我们知道有一个input ="hidden"的属性,顾名思义它就是隐藏在网页中的的一个元素,并不在网页中显示出来。 那么它的作用是什么呢.作过cgi,asp,php,jsp等的朋友都知道...

    用javascript模仿flash切换效果

    本主题探讨的是如何使用JavaScript来模仿经典的Flash切换效果,这种效果在早期的网页设计中非常流行,用于实现动画和过渡效果。Flash曾经是创建动态内容的首选工具,但随着HTML5和JavaScript技术的进步,开发者现在...

    众妙之门-javascript与jquery

    javascript与jquery精粹,很精美的电子书,建议有一定经验的开发者查看

    javascript void(0)的妙用

    2. `javascript:void expression` 这里的`expression`是一个JavaScript标准的表达式,它可以是任何合法的JavaScript语句或计算。圆括号是可选的,但通常为了提高代码可读性,我们会加上它们。 一个常见的应用场景...

    JavaScript中的this妙用实例分析

    本文实例讲述了JavaScript中的this妙用。分享给大家供大家参考,具体如下: JavaScript关键字this始JS脚本能够根据使用这个关键字的上下文将值传递给函数。 我们先来看如下一个网页,在用户单击链接之后,弹出一个...

    Javascript加密解密

    ##### 3.2 转义字符的妙用 JavaScript支持多种转义字符,如`\n`(换行)、`\r`(回车)等。此外,还可以使用`\x`(十六进制)或`\`(八进制)来表示任何字符。例如,汉字“黑”可以表示为`u9ED1`。 - **八进制转义...

    Javascript数组方法reduce的妙用之处分享

    Javascript数组方法中,相比map、filter、forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪些妙用之处,下面从reduce语法开始介绍。 语法 array.reduce...

    悟透JavaScript

    《悟透JavaScript》一书,又被称为《JavaScript真经》,是深入理解JavaScript编程精髓的经典之作。作者李战通过比喻和故事,将编程世界的本质——数据和代码的关系生动地阐述出来,帮助读者把握JavaScript的核心概念...

    JavaScript__深度强化学习为WiFi学习提供更好的工具.zip

    在"JavaScript__深度强化学习为WiFi学习提供更好的工具.zip"这个压缩包中,我们可以推测其内容可能与使用JavaScript实现深度强化学习技术来优化WiFi网络性能有关。 深度强化学习(Deep Reinforcement Learning,DRL...

Global site tag (gtag.js) - Google Analytics