DOM 表单应用

1.大小写转换

 1 <script>
 2 var a='aaa';
 3 var b='AaA';
 4 var c='BbB';
 5 //alert(c.toLowerCase());
 6 //把含有大写的字母转换为小写；
 7 //alert(b.toUpperCase());
 8 //小写转换为大写
 9 alert(a.toLowerCase()==b.toLowerCase());
10 </script>

2.查找相应元素的位置

1 <script>
2 var str='abcdef';
3 alert(str.search('f'));
4 //返回5，从0开始计数；返回元素所在的位置；
5 //没有找到换回-1；
6 </script>

3.split分割字符串+search查询

 1 <script>
 2 var str='paxster boychik';
 3 var arr=str.split(' ');
 4 //使用空格来分割字符串，也就是把字符串装换为数组
 5 //alert(arr);
 6 var str2='paxster is a man';
 7 var bFound=false;
 8 //定义一个变量，首先为false;
 9 for(i=0;i<arr.length;i++)
10 {
11     if(str2.search(arr[i])!=-1)
12     {
13         bFound=true;
14         break;
15     }
16 }
17 alert(bFound);
18 </script>

4.获取表格元素

1 window.onload=function ()
2 {
3     var oTab=document.getElementById('tab1');
4     //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[2].getElementsByTagName('td')[1].innerHTML);
5     alert(oTab.tBodies[0].rows[2].cells[1].innerHTML);//row代表行，cell代表列
6 };
7 </script>

5.onsubmit+onreset事件

 1 <script>
 2 window.onload=function ()
 3 {
 4     var oForm=document.getElementById('form1');
 5     var oUser=document.getElementsByName('user')[0];
 6     var oPass=document.getElementsByName('pass')[0];
 7     oForm.onsubmit=function ()
 8     //在提交之前提示
 9     {
10         if(oUser.value=='' || oPass.value=='')
11         {
12             alert('您填错了');
13             return false;
14         }
15     };
16     oForm.onreset=function ()
17     //在重置表单之前提示
18     {
19         /*if(confirm('是否要清空？'))
20         {
21             return true;
22         }
23         else
24         {
25             return false;
26         }*/
27         //return confirm('是否要清空？');
28         confirm('是否要清空？')?true:false;
29     };
30 };
31 </script>
32 </head>
33 <body>
34 <form id="form1" action="http://www.paxst.com/" method="get">
35     用户名：<input type="text" name="user" />
36     密码：<input type="password" name="pass" />
37     <input type="submit" value="提交" />
38     <input type="reset" value="重置" />
39 </form>
40 </body>

6.移动ul里面的li

 1 <script>
 2 window.onload=function ()
 3 {
 4     var oBtn=document.getElementById('btn1');
 5     var oUl1=document.getElementById('ul1');
 6     var oUl2=document.getElementById('ul2');
 7     //把ul1添加到ul2;
 8     oBtn.onclick=function ()
 9     {
10         var aLi=oUl1.getElementsByTagName('li');
11         //appendChild
12         //1.先移除父级    2.添加到新的父级
13         oUl2.appendChild(aLi[0]);
14     };
15 };
16 </script>
 1 <script>
 2 window.onload=function ()
 3 //给自己添加
 4 {
 5     var oBtn=document.getElementById('btn1');
 6     var oUl1=document.getElementById('ul1');
 7     
 8     oBtn.onclick=function()
 9     {
10         var aLi=oUl1.getElementsByTagName('li');
11         oUl1.appendChild(aLi[0]);
12     };
13 };
14 </script>

7.对数字进行排序sort()函数

 1 <script>
 2 window.onload=function ()
 3 {
 4     var oBtn=document.getElementById('btn1');
 5     var oUl=document.getElementById('ul1');
 6     oBtn.onclick=function ()
 7     {
 8         var aLi=oUl.getElementsByTagName('li');
 9         var arr=[];
10         var i=0;
11         //1.转成数组
12         for(i=0;i<aLi.length;i++)
13         {
14             arr[i]=aLi[i];
15         }
16         //2.数组排序
17         arr.sort(function (li1, li2){
18             return parseInt(li1.innerHTML)-parseInt(li2.innerHTML);
19         //parseInt函数，把字符串转换为数值
20         });
21         //3.重新插入
22         for(i=0;i<arr.length;i++)
23         {
24             oUl.appendChild(arr[i]);
25         }
26     };
27 };
28 </script>

 8.表单隔行变色

 1 <script>
 2 window.onload=function ()
 3 {
 4     //隔行变色
 5     var oTab=document.getElementById('tab1');
 6     var oldBgColor='';
 7     var i=0;
 8     
 9     for(i=0;i<oTab.tBodies[0].rows.length;i++)
10     {
11         oTab.tBodies[0].rows[i].style.background=i%2?'#CCC':'';
12         
13         oTab.tBodies[0].rows[i].onmouseover=function ()
14         {
15             oldBgColor=this.style.background;
16             this.style.background='yellow';
17         };
18         
19         oTab.tBodies[0].rows[i].onmouseout=function ()
20         {
21             this.style.background=oldBgColor;
22         };
23     }
24 };
25 </script>

9.升序+降序

 1 window.onload=function ()
 2 {
 3     var oBtn=document.getElementById('btn1');
 4     var oTab=document.getElementById('tab1');
 5     var bAsc=true;    //是否是升序排列
 6     
 7     oBtn.onclick=function ()
 8     {
 9         var arr=[];
10         var i=0;
11         //1.转成数组
12         for(i=0;i<oTab.tBodies[0].rows.length;i++)
13         {
14             arr[i]=oTab.tBodies[0].rows[i];
15         }
16         
17         //2.数组排序
18         arr.sort(function (tr1, tr2){
19             if(bAsc)
20             {
21                 return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
22             }
23             else
24             {
25                 return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML);
26             }
27         });
28         
29         //3.重新插入
30         for(i=0;i<arr.length;i++)
31         {
32             oTab.tBodies[0].appendChild(arr[i]);
33         }
34         
35         bAsc=!bAsc;
36         
37         /*if(bAsc)
38         {
39             bAsc=false;
40         }
41         else
42         {
43             bAsc=true;
44         }*/
45     };
46 };

10.表格增加/删除功能

 1 window.onload=function ()
 2 {
 3     var oTab=document.getElementById(·2'tab1');
 4     var oBtn=document.getElementById('btn1');
 5     var oTxt=document.getElementById('txt1');
 6     var iNowId=oTab.tBodies[0].rows.length+1;
 7     
 8     oBtn.onclick=function ()
 9     {
10         var oTr=document.createElement('tr');
11         var oTd=null;
12         
13         oTd=document.createElement('td');
14         oTd.innerHTML=iNowId++;
15         oTr.appendChild(oTd);
16         
17         oTd=document.createElement('td');
18         oTd.innerHTML=oTxt.value;
19         oTr.appendChild(oTd);
20         
21         oTd=document.createElement('td');
22         oTd.innerHTML='<a href="javascript:;">删除</a>';
23         oTr.appendChild(oTd);
24         
25         oTd.getElementsByTagName('a')[0].onclick=function ()
26         {
27             oTab.tBodies[0].removeChild(this.parentNode.parentNode);
28         };
29         
30         oTab.tBodies[0].appendChild(oTr);
31     };
32 };

11.搜索表格元素/高亮显示

 1 window.onload=function ()
 2 {
 3     var oBtn=document.getElementById('btn1');
 4     var oTab=document.getElementById('tab1');
 5     var oTxt=document.getElementById('txt1');
 6     
 7     oBtn.onclick=function ()
 8     {
 9         var i=0;
10         
11         for(i=0;i<oTab.tBodies[0].rows.length;i++)
12         {
13             var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
14             var sValueInTxt=oTxt.value.toLowerCase();
15             var arr=sValueInTxt.split(' ');
16             
17             var bFound=false;
18             
19             for(var j=0;j<arr.length;j++)
20             {
21                 if(sValueInTab.search(arr[j])!=-1)
22                 {
23                     bFound=true;
24                     break;
25                 }
26             }
27             
28             if(bFound)
29             {
30                 oTab.tBodies[0].rows[i].style.background='yellow';
31             }
32             else
33             {
34                 oTab.tBodies[0].rows[i].style.background='';
35             }
36         }
37     };
38 };

 

 

posted @ 2013-12-12 22:19  Paxster  阅读(242)  评论(0)  编辑  收藏  举报