一表格简化写法到认识：tBodies,rows,cells
结构：
<table id="tab1" border="1" width="400"> <thead> <td>ID</td> <td>姓名</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>海绵宝宝</td> <td>添加</td> </tr> </tbody> </table>
window.onload = function () { var oTab = document.getElementById("tab1"); // var a = oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[0].innerHTML; //简化写法 var a = oTab.tBodies[0].rows[0].cells[0].innerHTML; console.log(a);//1 }
var a = oTab.tBodies[0].rows[0].cells[0].innerHTML;
二，表格的隔行变色：
oTab.tBodies[0].rows[i].style.background = i%2 ? 'green':'';
三，鼠标移入移出，表格的高亮：
为了在鼠标移出的时避免覆盖掉隔行的颜色，可以先把当前行的颜色保存起来，等鼠标移出的时候在赋值给它。
window.onload = function () { var oTab = document.getElementById("tab1"); var oldBgColor = ''; var i=0; //循环表格中所有的行 for(i=0;i<oTab.tBodies[0].rows.length;i++){ //隔行变色 oTab.tBodies[0].rows[i].style.background = i%2 ? 'green':''; //表格高亮,鼠标移入移出 oTab.tBodies[0].rows[i].onmouseover = function () { oldBgColor = this.style.background;//把当前行的背景色存到oldBgColor里,因为他的背景色有绿色和""， this.style.background ="yellow"; }; oTab.tBodies[0].rows[i].onmouseout = function () { console.log(oldBgColor);//这里的颜色是""，或者是绿色 this.style.background = oldBgColor; }; } }
四，表格的添加：
var iNowId = oTab.tBodies[0].rows.length+1;//初始值，序号
var td = null;
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 () { if(oTxt.value){ var tr = document.createElement("tr"); var td = null; td = document.createElement("td"); td.innerHTML = iNowId++; tr.appendChild(td); td = document.createElement("td"); td.innerHTML = oTxt.value; tr.appendChild(td); td = document.createElement("td"); td.innerHTML = ' '; tr.appendChild(td); oTab.tBodies[0].appendChild(tr); oTxt.value =''; }else{ alert("请填写内容"); } } }
五，删除
td.getElementsByTagName("a")[0].onclick = function () {
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
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 () { if(oTxt.value){ var tr = document.createElement("tr"); var td = null; td = document.createElement("td"); td.innerHTML = iNowId++; tr.appendChild(td); td = document.createElement("td"); td.innerHTML = oTxt.value; tr.appendChild(td); td = document.createElement("td"); td.innerHTML = '<a href="#">删除</a>'; tr.appendChild(td); td.getElementsByTagName("a")[0].onclick = function () { oTab.tBodies[0].removeChild(this.parentNode.parentNode); } oTab.tBodies[0].appendChild(tr); oTxt.value =''; }else{ alert("请填写内容"); } } }
六，搜索：所谓搜索就是一行一行的比较；
toLowerCase() ,toUpperCase()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <table id="tab1" border="1" width="400"> <thead> <td>ID</td> <td>姓名</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>2</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>3</td> <td>2233</td> <td>添加</td> </tr> <tr> <td>4</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>4</td> <td>Abc</td> <td>添加</td> </tr> </tbody> </table> <input id="txt1" type="text"> <input id="btn1" type="button" value="搜索"> 所谓搜索，就是一行一行去比较 </body> </html> <script type="text/javascript"> window.onload = function () { var oTab = document.getElementById("tab1"); var oBtn = document.getElementById("btn1"); var oTxt = document.getElementById("txt1"); oBtn.onclick = function () { //循环所有的行，搜索姓名 var i= 0; if(oTxt.value){ for(i=0;i<oTab.tBodies[0].rows.length;i++){ var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); var sValueInTxt=oTxt.value.toLowerCase(); if(sValueInTab == sValueInTxt){//toLowerCase()搜索时忽略大小写 oTab.tBodies[0].rows[i].style.background = "green"; }else{ oTab.tBodies[0].rows[i].style.background = ""; } } }else{ alert("请输入值"); } } var a = "aaa"; var b ="AAA"; console.log(a==b);//false console.log(a.toLowerCase==b.toLowerCase);//true //忽略大小写的办法： //1,转成全小写，toLowerCase(); 2,转成全大写toUpperCase(); } </script>
七、多关键词搜索：循环所有的行，搜索姓名。
slipt(' ') :暂且认为用户用空格来分隔关键词
.search != -1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <table id="tab1" border="1" width="400"> <thead> <td>ID</td> <td>姓名</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>2</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>3</td> <td>2233</td> <td>添加</td> </tr> <tr> <td>4</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>4</td> <td>Abc</td> <td>添加</td> </tr> <tr> <td>4</td> <td>ab c</td> <td>添加</td> </tr> </tbody> </table> <input id="txt1" type="text"> <input id="btn1" type="button" value="搜索"> 多关键词搜索 一般搜索是根据后台来完成。 因为不可能有大量的数据在客户端，在客户端筛选，而是通过后台检索完成以后反馈到客户端来 </body> </html> <script type="text/javascript"> //字符串拆分 split var str = "blue ar"; var arr = str.split(' ');//用空格来拆分； console.log(arr[0]); console.log(arr[1]); var str2="blue is a person"; var bFound = false; for(i=0;i<arr.length;i++){ if(str2.search(arr[i]) !=-1){//如果str2中包含all里面的某个词 bFound = true; break; } } console.log(bFound); var str3="abcdef"; console.log(str3.search('bc'));//1,意味着bc是从1这个位置开始出现的。 window.onload = function () { var oTab = document.getElementById("tab1"); var oBtn = document.getElementById("btn1"); var oTxt = document.getElementById("txt1"); oBtn.onclick = function () { //循环所有的行，搜索姓名 var i= 0; if(oTxt.value){ for(i=0;i<oTab.tBodies[0].rows.length;i++){ var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); var sValueInTxt=oTxt.value.toLowerCase(); var arr = sValueInTxt.split(' ');//暂且认为用户用空格来分隔关键词 var bFound = false; for(var j=0;j<arr.length;j++){ if(sValueInTab.search(arr[j])!=-1){ bFound =true; break; } } if(bFound){//toLowerCase()搜索时忽略大小写 oTab.tBodies[0].rows[i].style.background = "green"; }else{ oTab.tBodies[0].rows[i].style.background = ""; } } }else{ alert("请输入值"); } } } </script>
八、移动
1,先从原来父级上移除；2，添加到新的父级。
案例1，从ul1移到ul2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #ul1{background:green;} #ul2{background:yellow;} </style> </head> <body> sort 操作：当我点击按钮的ul1里第一个li塞到ul2里 <input id="btn1" type="button" value="移动li"> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul id="ul2"></ul> </body> </html> <script type="text/javascript"> window.onload = function () { var oBtn = document.getElementById("btn1"); var oUl1 = document.getElementById("ul1"); var oUl2 = document.getElementById("ul2"); oBtn.onclick = function () { //把ul1里面的li元素全都选出来，然后移动第0个li； var aLi = oUl1.getElementsByTagName("li"); //appendChild实际上包含两种功能； //1,先从原来父级上移除；2，添加到新的父级。 oUl2.appendChild(aLi[0]); } } </script>
从ul1移动到ul1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #ul1{background:green;} </style> </head> <body> sort 操作：当我点击按钮的ul1里第一个li塞到ul2里 <input id="btn1" type="button" value="移动li"> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html> <script type="text/javascript"> window.onload = function () { var oBtn = document.getElementById("btn1"); var oUl1 = document.getElementById("ul1"); oBtn.onclick = function () { //把ul1里面的li元素全都选出来，然后移动第0个li； var aLi = oUl1.getElementsByTagName("li"); //appendChild实际上包含两种功能； //1,先从原来父级上移除；2，添加到新的父级。 oUl1.appendChild(aLi[0]); } } </script>
九、由移动激发的排序
排序原理：
1，选出最小的，添加到最后；
2，找出第二小，添加到倒数第二；
。。。。
排完了
排序过程：
1.转成数组；
2.数组排序；
3.重新插入。
ex：li排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #ul1{background:green;} </style> </head> <body> <input id="btn1" type="button" value="排序li"> <ul id="ul1"> <li>23</li> <li>14</li> <li>19</li> <li>40</li> <li>5</li> </ul> 排序原理： 1，选出最小的，添加到最后； 2，找出第二小，添加到倒数第二； 。。。。 排完了 </body> </html> <script type="text/javascript"> window.onload = function () { var oBtn = document.getElementById("btn1"); var oUl1 = document.getElementById("ul1"); oBtn.onclick = function () { //把ul1里面的li元素全都选出来，然后移动第0个li； var aLi = oUl1.getElementsByTagName("li"); //appendChild实际上包含两种功能； //1,先从原来父级上移除；2，添加到新的父级。 console.log(aLi); var arr = []; var i=0; //转成数组 for(i=0;i<aLi.length;i++){ arr[i] = aLi[i]; } console.log(arr); //数组排序 arr.sort(function (li1,li2) { return parseInt(li1.innerHTML)-parseInt(li2.innerHTML); }); //重新插入 for(i=0;i<arr.length;i++){ oUl1.appendChild(arr[i]); } } } </script>
表格排序：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <table id="tab1" border="1" width="400"> <thead> <td>ID</td> <td>姓名</td> <td>操作</td> </thead> <tbody> <tr> <td>5</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>3</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>1</td> <td>2233</td> <td>添加</td> </tr> <tr> <td>4</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>6</td> <td>Abc</td> <td>添加</td> </tr> <tr> <td>2</td> <td>ab c</td> <td>添加</td> </tr> </tbody> </table> <input id="btn1" type="button" value="排序"> 转成数组，数组排序，重新插入 </body> </html> <script type="text/javascript"> window.onload = function () { var oTab = document.getElementById("tab1"); var oBtn = document.getElementById("btn1"); oBtn.onclick = function () { var arr =[]; var i=0; //转成数组； for(i=0;i<oTab.tBodies[0].rows.length;i++){ arr[i]=oTab.tBodies[0].rows[i]; } //重新排序 arr.sort(function (tr1,tr2) { return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML); }) //重新插入 for(i=0;i<arr.length;i++){ oTab.tBodies[0].appendChild(arr[i]); } } } </script>
十、升序，降序；
.sort()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <table id="tab1" border="1" width="400"> <thead> <td>ID</td> <td>姓名</td> <td>操作</td> </thead> <tbody> <tr> <td>5</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>3</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>1</td> <td>2233</td> <td>添加</td> </tr> <tr> <td>4</td> <td>海绵宝宝</td> <td>添加</td> </tr> <tr> <td>6</td> <td>Abc</td> <td>添加</td> </tr> <tr> <td>2</td> <td>ab c</td> <td>添加</td> </tr> </tbody> </table> <input id="btn1" type="button" value="排序"> 转成数组，数组排序，重新插入 </body> </html> <script type="text/javascript"> window.onload = function () { var oTab = document.getElementById("tab1"); var oBtn = document.getElementById("btn1"); var bAsc = true;//是否是升序。 oBtn.onclick = function () { var arr =[]; var i=0; //转成数组； for(i=0;i<oTab.tBodies[0].rows.length;i++){ arr[i]=oTab.tBodies[0].rows[i]; } //重新排序 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]); } // if(bAsc){ // bAsc = false; // }else{ // bAsc = true; // } //简化写法 bAsc =!bAsc; } } </script>