M092-es6學(xué)習(xí)資料和js手冊-14Dom操作和應(yīng)用表格操作

1、DOM高級應(yīng)用1表格的應(yīng)用表格應(yīng)用1 tBodies. tHead. tFoot. rows, cells隔行變色鼠標(biāo)移入髙亮添加、刪除一行 DOM方法的便用Table-thead-trtd-tbody-trtd表格的規(guī)范寫法案例：ID 姓名 vd 年齡 l vtd 朱偉 24Vd 小黑 253Vd 李四 324Vd 劉三 215vtd 張飛 366VdA李四 62window.onload=function() varoTab=document.getElementById(MinfoH);/*獲取tbodyvar oTbody=oTab.getElenientsByTagName(Mtbo

2、dy,r);獲取tbody中的trvar oTbodytr=oTbody0.getElcmentsByTagName(,trH);/alert(oTbodytr.length);/6獲取tbody-tr中的(d/var oTbodytrJd=oTbodytr0.getElementsByTagName(utdM);/獲取第一行 tr 中的td/alert(oTbodytr0.getElementsByTagName(Htdn) 1 .innerHTML);/ 朱偉*/js提供了表格的便捷操作/tbody:tBodiesvar oTbody=oTab.tBodies;alert(oTbody.

3、length) y/1所有的行tr:rowsivar oTbodyTr=oTbody0.rows; alert(oTbodyTr.length);/6單元格td： cellsi,T標(biāo)從0開始 var oTbodTr_td_2=oTbodyTr0.cells 1 ;/朱偉 alert(oTbodyTr_td_2.innerHTML);(Tab.tBodles0rows(1eell3(1.innerHTML表格特有的獲取規(guī)則一個表格可以多個（Bodies只能有一個舊cad.tFooM不是數(shù)組而是直接的元素）獲取是:oTab.tBodies0.rowsi.cellsi通過這樣的方式獲取表格的單元格案

4、例：隔行變色，鼠標(biāo)移入和移出變色dom基礎(chǔ)-表格應(yīng)用-隔行變色#info margin :0 auto; margin-top:24px; width :300px;)#info,#info tdborder-collapse:collapse; border: lpx solid #aaa:)window.onload=function()var oTab=document.getElementById(infoH);/js提供了表格的便捷操作/tbody:tBodiesvar oTbody=oTab.tBodies;/alert(oTbody.length):/1/tbody 所有的行 t

5、r:rows,tr:rowsi第 i 行var oTbodyTr=oTbody0.rows;/alert(oTbodyTr.length)y/6單元格td： cellsi, F標(biāo)從0開始/var oTbodyTr_td_2=oTbodyTr0.celIs 1 JI 朱偉/alert(oTbodyTr_td_2.innerHTML);隔行變色如果沒有tBodies就把表頭算進(jìn)去var oldColor=PM;for(var i=0;ioTbodyTr.length;i+)/tbody-lr 的變色if(i%2!=0)oTbodyTrfi.style.background=H#B6CFCAH： 鼠

6、標(biāo)移入和移除變色oTbodyTr(i.onmouseover=function()/先獲取原來的顏色 oklColor=this.style.background; this.style.background=HgrccnM：)oTbodyTr(i.onmouseout=function()當(dāng)移出保留原來的color this.style.background=oldColor;)IDVd 姓名 vd 年齡 l Vd 朱偉 242 vtd 小黑 253 vtd 李四 324 劉三 215 vtd 張飛 366 v(d 李四 62ID姓名年齡1朱偉24225李四壯4劉三21 15張飛366李四6

7、22)表格的添加和刪除DOm方法鼠標(biāo)點(diǎn)擊添加oBtn_add.onclick=function() 創(chuàng)建一行var oTr=document.createEleinent(,trn);創(chuàng)建三個單元格var oTd=document.createElement(ntd);設(shè)置td中的內(nèi)容oTd.innerHTML=oTbodyTr.length+l;添加到tr中oTr.appendChild(oTd);var oTd=document.createElement(ntdH);設(shè)置td中的內(nèi)容oTd.innerHTML=oName.value;添加到tr中oTr.appendChild(oTd);

8、var oTd=document.createElement(,tdM);設(shè)置td中的內(nèi)容oTd.innerHTML=oAge.value;添加到tr中oTr.appendChild(oTd);將這個tr添加到tbody中去oTbody0,appendChild(oTr);問題出來了：下而添加的tr沒有了事件姓名:年齡：5551添加J1ID姓名年齡1朱偉242小里253李四324劉三215張飛366李四627fefeSSS8SSs4449SSS555ID姓名年齡操作1朱偉242-J /V%253李四324劉三215張飛366李四627SSS5558SSS5559SSS55510SSS55511

9、SSS555用 inncrHTNlL 的 bug姓名：SSS年齡:555滋加ID姓名年齡操作1朱偉242/里253李四324劉三215張飛366李四6218SSS555刪除18SSS555刪除9SSS555刪除解決這個問題，先將id放在一個變量中，當(dāng)我們添加的時候讓這個變呈加上1 var idNum=oTbodyTr.length+l;/ 保存這個變量姓名:SSSS年齡:SSS滋加ID姓名年齡操作1朱偉242小里253李四324劉三215張飛366李四628sfefeSSS刪除9SSSSSSS刪除11ssssfefefeSSS刪除12ssssfefefeSSS刪除13SSSSSSS刪除完整的代

10、碼： dom基礎(chǔ)-表格應(yīng)用-添加和刪除#infomargin :0 auto; margin-top:24px; width :300px;)#add_info_box margin :0 auto; width :300px;)#info.#info td border-collapse:collapse; border: lpx solid #aaa:window.onload=function() varoTab=document.getElementById(,infoH); var oBtn_add=document.getElementById(Hadd_infoH); var o

11、Namc=documcnt.getElementById(nnameM); var oAge=document.getElementById(Hage,r);/js提供了表格的便捷操作 /tbody:tBodies var oTbody=oTab.tBodies;/alert(oTbody.length) ;/l/tbody 所有的行 tr:rows,tr:rowsi第 i 行 var oTbodyTr=oTbody 0 . rows; /alert(oTbodyTr.length)y/6/單元格td： cellsi, F標(biāo)從0開始/var oTbodyTr_td_2=oTbodyTr0J.c

12、ellsf 1偉/alert(oTbodyTr_td_2.innerHTML);隔行變色如果沒有tBodies就把表頭算進(jìn)去var oldColou;for(var i=0;ioTbodyTr.length:i+)/tbody-tr 的變色 if(i%2!=0) oTbodyTri.style.background=H#B6CFCAH;鼠標(biāo)移入和移除變色oTbodyTr(i.onmouseover=function() 先獲取原來的顏色 oldColor=this.style.background; this.style.background=HgreenH;)oTbodyTri.onmous

13、eout=function()當(dāng)移出保留原來的color this.style.background=oldColor;/鼠標(biāo)點(diǎn)擊添加var idNum=oTbodyTr.length+1;oBtn_add.onclick=function()創(chuàng)建一行var oTr=documcnt.createElement(HtrH);創(chuàng)建三個單元格var oTd=dcx:unient.createEIement(Htd,r);設(shè)JiHd中的內(nèi)容oTd.innerHTML=idNum+;/添加到tr中oTr.appendChild(oTd);var oTd=document.createElemcnt(H

14、td,r);設(shè)Jgtd中的內(nèi)容oTd.innerHTML=oName.value;添加到tr中oTr.appendChild(oTd);var oTd=docuincnt.createElement(Htd,r);設(shè)Jgtd中的內(nèi)容 oTd.innerHTML=oAge.value;添加到tr中 oTr.appendChild(oTd);var oTd=docunient.createElement(,tdu);設(shè)宜td中的內(nèi)容oTd.innerHTML=N 刪除 H; 添加到tr中oTr.appendChild(oTd);給a添加刪除事件oTr.getElementsBfTagName(,a

15、H)0.onclick=function() 從tbody中刪除一行 oTbodyOJ.removeChild(this.parentNode.parentNode);/將這個茁添加到tbody中去 oTbody0.appendChild(oTr);姓名:年齡：IDvtd 姓 vd 年齡 vld 操作 lVd 朱偉 24 2 vtd 小黑 25 vtd 李四 32 4 劉三 21 5 vtd 張飛 36 6 Vd李四 62 2表格的搜索和排序表格應(yīng)用2.!鯽；版本 1: SfiiiJR本一符;版本2 :忽略大燈寫大燈寫轉(zhuǎn)換:版本3 : WW廈累一search用；版本4 :多關(guān)鍵詞一 plith

16、r!高亮顯示、締選HE I移動Li元索排序：轉(zhuǎn)換一排序一插入表格的搜索功能鼠標(biāo)點(diǎn)擊搜索oBtn_add.oncIick=function()for(var i=0;itBodies0rowsistylebackground=nredn;else沒有的顏色oTab.tBodies0.rowsi.styIe.background=n,t;姓名：乙hiwE i年齡：I搜索ID姓名年齡操作1朱偉24刪除2小里25刪除3李四32刪除4劉三21刪除5張飛36刪除6李詩62刪除7 zhuwei62刪除如何解決大小寫呢？將搜索的內(nèi)容和獲取到的內(nèi)容全部轉(zhuǎn)化為小寫:toLowerCaseO;模糊搜索：search

17、()Str.search(-fefe-)$D果字符串屮搜索到字符就返回索引的值，否則-1鼠標(biāo)點(diǎn)擊搜索oBtn_add.onclick=function() for(var i=0;ioTab.tBodies0.rows.length;i+)vars_td=oTab.tBodies0.rowsi.cellsl.innerHTML.toLowerCase();var s_txt=oName.value.toLowerCase();轉(zhuǎn)化為小寫toLowerCase();if(s_txt.toLowerCase()=s_td.toLowerCase()oTab.tBodiesOJ.rowsi.styl

18、e.background=nredH;else沒有的顏色oTab.tBodies0.rowsi.style.background=H;*/模糊搜索,在單元格中搜索字符 /alert(s_td);/格中的字符串 /alert(s_txt);/搜索的字符串 if(s_td.search(s_txt) !=-1)oTab.tBodies0.rowsi.style.background=,redH;elseoTab.tBodies0.rowsi.style.background=,M,;多個關(guān)鍵詞搜索補(bǔ)充一點(diǎn):var str=nzhuwei fefef fefe11;var arr=str.split

19、(M ”);/字符串分割 alert(arr);zhuwer,fefefVfefe;Airi匹配鼠標(biāo)點(diǎn)擊搜索oBtn_add.onclick=function() for(var i=0;ioTab.tBodies0.rows.length;i+)vars_td=oTab.tBodies0.rowsi.cells 1 .innerHTML.toLowerCase();var s_txt=oName.value.toLowerCase();var arr=s_txt.split( );/ 分割oTab.tBodies0.rowsi.style.background=,H,;for(var j=O

20、;jarr.length;j+) 模糊搜索,在單元格中搜索字符 /alert(sjd);/表格中的字符串 /alert(s_txt);/搜索的字符串 if(s_td.search(arrj ) !=-1)oTab.tBodies0.rowsi.style.background=nredn;elseoTab.tBodies0.rowsi.style.background=,M;表格篩選先隱藏，當(dāng)符合條件就顯示出來小結(jié)：表格的移入和移出，當(dāng)移出來保留原來的顏色。表格排序補(bǔ)充：appendChild();window.onload=function() var oBtn=document.getEl

21、ementById(ubtnM);var oUl_l=document.getElementById(Mul”);var oUl_2=document.getElementById(,ul_2H);oBtn.onclick=function() var oli=oUl _l.childrenO;oUl_2.appendChild(oli);/I添加元素節(jié)點(diǎn)到父節(jié)點(diǎn)中先從原來的父節(jié)點(diǎn)上刪除，后添加oBtn.onclick=function()var oli=oUl_I.children0: oUl.appendChild(oli);/oUL2.appcndChild(oli);/I添加元素節(jié)點(diǎn)到

22、父節(jié)點(diǎn)中先從原來的父節(jié)點(diǎn)上刪除，后添加案例：li排序dom-li 排序background:green;) window.onload=function() var oBtn=document.getEIementById(HbtnM);var oULl=document.getElementById(,rul_r);var oUl_2=document.getElementById(uuL2M);oBtn.onclick=function()/oli表示元素集合獲取所有的livar aLi=oULl.getElementsByTagName(HliM);var ali_arr=H；for(v

23、ar i=O:iaLi.lcngth:i+)將li壓入數(shù)組中a!Larri=aLifi|:I/alert(ali_arr);ali_arr.sort(function(lLv 1 Ji_v2)var vl=parseInt(li_vl.innerHTML);var v2=parseInt(li_v2.innerHTML); return vlv2;)對數(shù)組進(jìn)行排序/alert(ali_arrO.innerHTML);/ 第一個值是最小的那個/按照數(shù)組的順序重新appendChildfor(var i=O;iali_arr.length:i+)oUl_l .appendChild(a!i_ani

24、);vinput type=Hbuttonn value=M排序” id=MbtnM /1212333212v/body原理:將要排序的tr放入一個數(shù)組中，通過比較數(shù)組的第i個元素的td的單元格的innerHTML. 從小到大的順序排序，然后通過對排序后的tr集合的數(shù)組用appcndChild()實(shí)現(xiàn)表格的排序。 dom基礎(chǔ)-表格應(yīng)用-表格排序#infomargin :0 auto;margin-top:24px;width :300px;#addjnfo_boxmargin :0 auto;width :300px;#info,#info tdborder-collapse:collapse

25、;border: lpx solid #aaa:window.onload=function()var oTab=document.getElementById(,infoM);var oBtn_add=documcnt.getElementById(HsearchJnfoH);var oName=document.getElementById(,nameM);var oAge=document.getElementById(Hage,r);/js提供了表格的便捷操作 /tbody:tBodies var oTbody=oTab.tBodies;/alert(oTbody.length);/l/tbody 所有的行 tr:rows,tr:rowsi第 i 行 var oTbodyTr=oTbody 0 . rows; /alert(oTbodyTr.length)y/6/單元格td： cellsi,T標(biāo)從0開始/var oTbodyTr_td_2=oTbodyTr0.cells 1 JI 朱偉/aIert(oTbodyTr_td_2.innerHTML);隔行變色如果沒有tBodies就把表頭算進(jìn)去var oldColor=HM;for(var i=0;ioTbodyTr.length:i+)/tbody-tr 的變色if