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 };

 

 

你可能感兴趣的:(dom)