表格应用
获取
tBodies， tHead， tFoot， rows， cells
隔行变色
鼠标移入高亮，
添加，删除一行
DOM的方法使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>输出表格</title> <script> window.onload=function () { var oTab=document.getElementById('tab1'); //第一种写法 //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[2].getElementsByTagName('td')[1].innerHTML); alert(oTab.tBodies[0].rows[2].cells[1].innerHTML); }; </script> </head> <body> <table id="tab1" border="1" width="400"> <thead> <td>ID</td> <td>姓名</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td></td> </tr> <tr> <td>2</td> <td>流氓</td> <td></td> </tr> <tr> <td>3</td> <td>莫莫</td> <td></td> </tr> <tr> <td>4</td> <td>小李</td> <td></td> </tr> <tr> <td>5</td> <td>小米</td> <td></td> </tr> <tr> <td>6</td> <td>小明</td> <td></td> </tr> </tbody> </table> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); var oTab=document.getElementById('tab1'); //用变量改变顺序还是倒序 var bAsc=true; oBtn.onclick=function() { //点击生成数组 var arr=[]; var i=0; for(i=0; i<oTab.tBodies[0].rows.length; i++) { //把每行赋给一个数组，坐标从0开始 arr[i]=oTab.tBodies[0].rows[i]; } //用sort排序arr arr.sort(function(tr1, tr2){ if(bAsc) { return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML); } else { return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML); } }); //以此打印出每行 for(i=0;i<arr.length;i++) { oTab.tBodies[0].appendChild(arr[i]); } bAsc=!bAsc; }; } </script> <body> <input id="btn1" type="button" value="排序" /> <table id="tab1" border="1" width="400"> <thead> <td>编号</td> <td>姓名</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td></td> </tr> <tr> <td>2</td> <td>miang</td> <td></td> </tr> <tr> <td>6</td> <td>Bloo</td> <td></td> </tr> <tr> <td>4</td> <td>home</td> <td></td> </tr> <tr> <td>5</td> <td>heep</td> <td></td> </tr> </tbody> </table> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格搜索</title> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); var oTab=document.getElementById('tab1'); var oTxt=document.getElementById('txt1'); oBtn.onclick=function() { var i=0; for(i=0; i<oTab.tBodies[0].rows.length; i++) { //获取每行转成大写 var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); //获取每个txt转换成大写 var sValueInTxt=oTxt.value.toLowerCase(); //把文本框的数组用空格分隔 var arr=sValueInTxt.split(' '); var bFound=false; for(var j=0;j<arr.length;j++) { //监控text里的value字符串，不为空则开bFound if(sValueInTab.search(arr[j])!=-1) { bFound=true; break; } } if(bFound) { oTab.tBodies[0].rows[i].style.background='yellow'; } else{ oTab.tBodies[0].rows[i].style.background=''; } } } } </script> </head> <body> <input id="txt1" type="text" /> <input id="btn1" type="button" value="搜索" /> <table id="tab1" border="1" width="400"> <thead> <td>编号</td> <td>姓名</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td></td> </tr> <tr> <td>2</td> <td>miang</td> <td></td> </tr> <tr> <td>3</td> <td>Bloo</td> <td></td> </tr> <tr> <td>4</td> <td>home</td> <td></td> </tr> <tr> <td>5</td> <td>heep</td> <td></td> </tr> </tbody> </table> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格的删除</title> <script> window.onload=function() { var oTab=document.getElementById('tab1'); var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var iNowId=oTab.tBodies[0].rows.length+1; oBtn.onclick=function() { //创建行标签 var oTr=document.createElement('tr'); var oTd=null; //创建第一个空白格 oTd=document.createElement('td'); //内容等于坐标+1 oTd.innerHTML=iNowId++; //添加到行里 oTr.appendChild(oTd); //创建第2个空白格 oTd=document.createElement('td'); //添加输入框内容 oTd.innerHTML=oTxt.value; //添加到行里 oTr.appendChild(oTd); //创建第3个空白格 oTd=document.createElement('td'); //空白格内容 oTd.innerHTML='<a href="javascript:;">删除</a>'; //添加到行里 oTr.appendChild(oTd); oTd.getElementsByTagName('a')[0].onclick=function() { //点击等于删除父级的父级；等于本身在的行 oTab.tBodies[0].removeChild(this.parentNode.parentNode); } //添加一行到表中 oTab.tBodies[0].appendChild(oTr); } } </script> </head> <body> <input id="txt1" type="text" /> <input id="btn1" type="button" value="添加" /> <table id="tab1" border="1" width="400"> <thead> <td>编号</td> <td>姓名</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td></td> </tr> <tr> <td>2</td> <td>miang</td> <td></td> </tr> <tr> <td>3</td> <td>Bloo</td> <td></td> </tr> <tr> <td>4</td> <td>home</td> <td></td> </tr> <tr> <td>5</td> <td>heep</td> <td></td> </tr> </tbody> </table> </body> </html>
表格应用（2）
搜索
版本1：基础版本------字符串比较
版本2：忽略大小写----大小写转换
版本3： 模糊搜索---search的使用
版本4：多关键词---split
高亮显示， 筛选
排序
移动li
元素排序： 转换---排序----插入
<script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var aLi=oUl.getElementsByTagName('li'); var arr=[]; var i=0; //1.转成数组 for(i=0;i<aLi.length;i++) { arr[i]=aLi[i]; } //2.数组排序 arr.sort(function (li1, li2){ return parseInt(li1.innerHTML)-parseInt(li2.innerHTML); }); //3.重新插入 for(i=0;i<arr.length;i++) { oUl.appendChild(arr[i]); } }; }; </script> </head> <body> <input id="btn1" type="button" value="排序Li" /> <ul id="ul1"> <li>32</li> <li>12</li> <li>87</li> <li>9</li> <li>18</li> </ul> </body> </html>
表单应用（1）
表单的基本基础知识
什么是表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function () { var oForm=document.getElementById('form1'); var oUser=document.getElementsByName('user')[0]; var oPass=document.getElementsByName('pass')[0]; oForm.onsubmit=function () { if(oUser.value=='' || oPass.value=='') { alert('您填错了'); return false; } }; oForm.onreset=function () { /*if(confirm('是否要清空？')) { return true; } else { return false; }*/ return confirm('是否要清空？'); }; }; </script> </head> <body> <form id="form1" action="http://www.miaov.com/" method="get"> 用户名：<input type="text" name="user" /> 密码：<input type="password" name="pass" /> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form> </body> </html>
向服务器提交数据，比如用户注册
action 提交到哪里
表单事件
onsubmit 提交时发生
onreset 重置时发生
表单应用（2）
表单内容验证
阻止用户输入非法字符 阻止事件
输入时， 失去焦点时验证 onkeyup onblur
提交时检查 onsubmit
后台数据检查
本节重点
表格----元素获取
表格-----隔行变色，高亮显示
表格----添加，删除
表格----排序
表单----常用属性
表单----事件
表单---校验