Rumah > Artikel > hujung hadapan web > 深入JavaScript之DOM的高级应用
这次给大家带来深入JavaScript之DOM的高级应用,使用JavaScript的DOM高级应用的注意事项有哪些,下面就是实战案例,一起来看一下。
隔行变色
<html lang="en"><head> <meta charset="UTF-8"> <title>04-表格的应用</title> <style> table{ margin: 100px auto; width: 300px; text-align: center; background-color: black; } table tr { background-color: white; } </style> <script> window.onload = function () { var oTab = document.getElementById('tab1'); //获取第二行的'张三'// alert( oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML); //table独有的简单操作 //上面的代码可以简写成下面的格式;// alert( oTab.tBodies('tbody')[0].rows('tr')[1].cells('td')[1].innerHTML); /** *90年代,div+css没人用,人们用的几乎全是table,于是乎,就有了table的便捷操作. * tBodies(一个table里可以有多个tbody),tHead,tFoot,rows,cells等便捷操作 * */ //隔行变色 var aRow = oTab.tBodies[0].rows;// alert(aRow.length); //记录一下颜色 var oldColor = null; for(var i=0;i<aRow.length;i++){ aRow[i].onmouseover = function () { //先记录一下之前的颜色 oldColor = this.style.backgroundColor; this.style.background = 'green'; } aRow[i].onmouseout = function () { this.style.backgroundColor = oldColor; } if (i%2){ aRow[i].style.background = ''; }else { aRow[i].style.background = '#ccc'; } } } </script></head><body><table id="tab1"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td>27</td> </tr> <tr> <td>2</td> <td>张三</td> <td>32</td> </tr> <tr> <td>3</td> <td>李四</td> <td>17</td> </tr> <tr> <td>4</td> <td>王五</td> <td>28</td> </tr> <tr> <td>5</td> <td>张伟</td> <td>35</td> </tr> </tbody></table></body></html>
2.表格的添加
表格的动态添加
<html lang="en"><head> <meta charset="UTF-8"> <title>04-表格的添加 删除</title> <style> #div1{ text-align: center; } #div1 #form{ margin: 100px 0 10px; } #div1 table{ margin: 0px auto; width: 300px; text-align: center; background-color: black; } table tr { background-color: white; } </style> <script> window.onload = function () { var oTab = document.getElementById('tab1'); var oName = document.getElementById('name'); var oAge = document.getElementById('age'); var oBtn = document.getElementById('btn1'); oBtn.onclick = function () { var oTr = document.createElement('tr'); var oTd = document.createElement('td'); oTd.innerHTML = oTab.tBodies[0].rows.length+1; oTr.appendChild(oTd); var oTd = document.createElement('td'); oTd.innerHTML = oName.value; oTr.appendChild(oTd); var oTd = document.createElement('td'); oTd.innerHTML = oAge.value; oTr.appendChild(oTd); //注意:一定要添加到第0个tBodies上 oTab.tBodies[0].appendChild(oTr); } } </script></head><body><div id="div1"> <div id="form"> 姓名:<input id="name" type="text"> 年龄:<input id="age" type="text"> <input id="btn1" type="button" value="添加"> </div> <table id="tab1"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td>27</td> </tr> <tr> <td>2</td> <td>张三</td> <td>32</td> </tr> <tr> <td>3</td> <td>李四</td> <td>17</td> </tr> <tr> <td>4</td> <td>王五</td> <td>28</td> </tr> <tr> <td>5</td> <td>张伟</td> <td>35</td> </tr> </tbody> </table></div></body></html>
3.表格的删除
<html lang="en"><head> <meta charset="UTF-8"> <title>05-表格的添加 删除</title> <style> #div1{ text-align: center; } #div1 #form{ margin: 100px 0 10px; } #div1 table{ margin: 0px auto; width: 300px; text-align: center; background-color: black; } table tr { background-color: white; } </style> <script> window.onload = function () { var oTab = document.getElementById('tab1'); var oName = document.getElementById('name'); var oAge = document.getElementById('age'); var oBtn = document.getElementById('btn1'); //行数 var vRow = oTab.tBodies[0].rows.length+1; oBtn.onclick = function () { var oTr = document.createElement('tr'); vRow++; var oTd = document.createElement('td'); oTd.innerHTML = vRow; oTr.appendChild(oTd); var oTd = document.createElement('td'); oTd.innerHTML = oName.value; oTr.appendChild(oTd); var oTd = document.createElement('td'); oTd.innerHTML = oAge.value; oTr.appendChild(oTd); var oTd = document.createElement('td'); oTd.innerHTML = '<a href="javaScript:;">删除</a>'; oTr.appendChild(oTd); oTd.getElementsByTagName('a')[0].onclick = function () { //注意:一定要从第0个tBodies上删除. //this.parentNode 指的是 td //this.parentNode.parentNode 指的是 tr oTab.tBodies[0].removeChild(this.parentNode.parentNode); }; //注意:一定要添加到第0个tBodies上 oTab.tBodies[0].appendChild(oTr); } } </script></head><body><div id="div1"> <div id="form"> 姓名:<input id="name" type="text"> 年龄:<input id="age" type="text"> <input id="btn1" type="button" value="添加"> </div> <table id="tab1"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td>27</td> <td></td> </tr> <tr> <td>2</td> <td>张三</td> <td>32</td> <td></td> </tr> <tr> <td>3</td> <td>李四</td> <td>17</td> <td></td> </tr> <tr> <td>4</td> <td>王五</td> <td>28</td> <td></td> </tr> <tr> <td>5</td> <td>张伟</td> <td>35</td> <td></td> </tr> </tbody> </table></div></body></html>
4.表格的搜索
忽略大小写 , 模糊搜索 , 多关键字搜索
toLowerCase() 把字符串转成全小写的形式;
模糊搜索 search 当找到的时候,返回位置;找不到,返回-1;
<html lang="en"><head> <meta charset="UTF-8"> <title>06-表格的搜索</title> <style> #div1{ text-align: center; } #div1 #form{ margin: 100px 0 10px; } #div1 table{ margin: 0px auto; width: 300px; text-align: center; background-color: black; } table tr { background-color: white; } </style> <script> window.onload = function () { var oTab = document.getElementById('tab1'); var oTxt = document.getElementById('name'); var oBtn = document.getElementById('btn1'); oBtn.onclick = function () { for (var i=0;i<oTab.tBodies[0].rows.length;i++){ //忽略大小写 //toLowerCase() 把字符串转成全小写的形式; //把if里面两边都转成全小写的形式; var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); var sTxt = oTxt.value.toLowerCase(); //模糊搜索 search 当找到的时候,返回位置;找不到,返回-1 //search() //多关键字搜索 //假设多个关键字之间用 空格 隔开的,以后可以使用正则表达式 var arr = sTxt.split(' '); //先把背景颜色重置 oTab.tBodies[0].rows[i].style.backgroundColor = ''; for (var j=0;j<arr.length;++j){ if (sTab.search(arr[j]) != -1){ oTab.tBodies[0].rows[i].style.backgroundColor = 'yellow'; } } } } } </script></head><body><div id="div1"> <div id="form"> 姓名:<input id="name" type="text"> <input id="btn1" type="button" value="搜索"> </div> <table id="tab1"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td>27</td> <td></td> </tr> <tr> <td>2</td> <td>张三</td> <td>32</td> <td></td> </tr> <tr> <td>3</td> <td>李四</td> <td>17</td> <td></td> </tr> <tr> <td>4</td> <td>王五</td> <td>28</td> <td></td> </tr> <tr> <td>5</td> <td>张伟</td> <td>35</td> <td></td> </tr> </tbody> </table></div></body></html>
5.排序
<html lang="en"><head> <meta charset="UTF-8"> <title>08-排序</title> <script> window.onload = function () { var btn = document.getElementById('btn1'); var oUl = document.getElementById('ul1'); btn.onclick = function () { //先初始化数组 var arr = []; for (var i=0;i<oUl.children.length;i++){ arr.push(oUl.children[i]); //排序 arr.sort(function (li1,li2) { //最好不要依赖隐式类型转换,提前给强转下 var n1 = parseInt(li1.innerHTML); var n2 = parseInt(li2.innerHTML); return n1-n2; }) } //再重新添加 for(var i=0;i<arr.length;i++){ oUl.appendChild(arr[i]); } } } </script></head><body><input id="btn1" type="button" value="排序"><ul id="ul1"> <li>34</li> <li>25</li> <li>9</li> <li>88</li> <li>54</li></ul></body></html>
9fd01892b579bba0c343404bcccd70fb93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a706-表格的排序6e916e0f7d1e588d4f442bf645aedb2f c9ccee2e6ea535a969eb3f532ad9fe89 #div1{ text-align: center; } #div1 #form{ margin: 100px 0 10px; } #div1 table{ margin: 0px auto; width: 300px; text-align: center; background-color: black; } table tr { background-color: white; } 531ac245ce3e4fe3d50054a55f265927 3f1c4e4b6b16bbbd69b2ee476dc4f83a window.onload = function () { var oTab = document.getElementById('tab1'); var oBtn = document.getElementById('btn1'); oBtn.onclick = function () { //aTr是个集合,他没有sort()这个方法 var aTr = oTab.tBodies[0].rows; //把tr放到一个数组里面 var arr = []; for(var i=0;ia1c07c5f1e02751323aca951a3a5eb569c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d64cb571ed5952d9b43da1f2d70a36e91 3f44b33c791f1c420f39aac77a9dde29 7a51dde6cf86cfa9d2cade29053872ad 16b28748ea4df4d9c2150843fecfba68 ec280d8942689ac37cb2dc06a8c6db29 ae20bdd317918ca68efdc799512a9b39 b6c5a531a458a2e790c1fd6421739d1cIDb90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c姓名b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c年龄b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c操作b90dd5946f0946207856a8a37f441edf 7943277d65306330563feb42dc8c705a 92cee25da80fac49f6fb6eec5fd2c22a a34de1251f0d9fe1e645927f19a896e8 b6c5a531a458a2e790c1fd6421739d1c2b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c张三b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c32b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf fd273fcf5bcad3dfdad3c41bd81ad3e5 a34de1251f0d9fe1e645927f19a896e8 b6c5a531a458a2e790c1fd6421739d1c4b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c王五b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c28b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf fd273fcf5bcad3dfdad3c41bd81ad3e5 a34de1251f0d9fe1e645927f19a896e8 b6c5a531a458a2e790c1fd6421739d1c5b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c张伟b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c35b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf fd273fcf5bcad3dfdad3c41bd81ad3e5 a34de1251f0d9fe1e645927f19a896e8 b6c5a531a458a2e790c1fd6421739d1c1b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1cBlueb90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c27b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf fd273fcf5bcad3dfdad3c41bd81ad3e5 a34de1251f0d9fe1e645927f19a896e8 b6c5a531a458a2e790c1fd6421739d1c3b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c李四b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1c17b90dd5946f0946207856a8a37f441edf b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf fd273fcf5bcad3dfdad3c41bd81ad3e5 ca745a59da05f784b8811374296574e1 f16b1740fad44fb09bfe928bcc527e0816b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci 深入JavaScript之DOM的高级应用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!