这次给大家带来深入javascript之dom的高级应用，使用javascript的dom高级应用的注意事项有哪些，下面就是实战案例，一起来看一下。
隔行变色
04-表格的应用 table{ margin: 100px auto; width: 300px; text-align: center; background-color: black; } table tr { background-color: white; } 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'; } } }
登录后复制
ID 姓名 年龄1 Blue 27 2 张三 32 3 李四 17 4 王五 28 5 张伟 35
2.表格的添加
表格的动态添加
04-表格的添加 删除 #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; } 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); } }姓名: 年龄:
ID 姓名 年龄 1 Blue 27 2 张三 32 3 李四 17 4 王五 28 5 张伟 35
登录后复制
3.表格的删除
05-表格的添加 删除 #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; } 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 = '删除'; 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); } }姓名: 年龄:
ID 姓名 年龄 操作 1 Blue 27 2 张三 32 3 李四 17 4 王五 28 5 张伟 35
登录后复制
4.表格的搜索
忽略大小写 , 模糊搜索 , 多关键字搜索
toLowerCase() 把字符串转成全小写的形式;
模糊搜索 search 当找到的时候,返回位置;找不到,返回-1;
06-表格的搜索 #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; } 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'; } } } } }姓名:
ID 姓名 年龄 操作 1 Blue 27 2 张三 32 3 李四 17 4 王五 28 5 张伟 35
登录后复制
5.排序
08-排序 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]); } } }
登录后复制 34 25 9 88 54
06-表格的排序 #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; } 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;i<aTr.length;i++){ arr.push(aTr[i]); } //排序 arr.sort(function (tr1, tr2) { var n1 = parseInt(tr1.cells[0].innerHTML); var n2 = parseInt(tr2.cells[0].innerHTML); return n1-n2; }) //添加 for (var i=0;i<arr.length;i++){ oTab.tBodies[0].appendChild(arr[i]); } } }
ID 姓名 年龄 操作 2 张三 32 4 王五 28 5 张伟 35 1 Blue 27 3 李四 17
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
深入JavaScript之基础应用
JS的8个必须注意的基础知识
以上就是深入JavaScript之DOM的高级应用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2783565.html
