首页 > 代码库 > 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）
表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）
看着网上的视频教程，虽说还是有点简单，但还是不免想记录下。这些操作包括（隔行变色，高亮显示，添加删除，搜索功能），而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几个方法，search方法，
split方法等等
效果体验：http://runjs.cn/detail/vm8bz8dl
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload = function(){ var tb = document.getElementById(‘tb‘); //alert(tb.getElementsByTagName(‘tbody‘)[0].getElementsByTagName(‘tr‘)[1].getElementsByTagName(‘td‘)[1].innerHTML); //alert(tb.tBodies[0].rows[1].cells[1].innerHTML); //表格隔行变色和鼠标滑过高亮 var oldColor = ‘‘; //保存原有的背景色 for (var i=0;i<tb.tBodies[0].rows.length;i++) { tb.tBodies[0].rows[i].style.background = i%2 ? ‘#CCC‘: ‘‘; tb.tBodies[0].rows[i].onmouseover = function(){ oldColor = this.style.background; this.style.background = ‘yellow‘; } tb.tBodies[0].rows[i].onmouseout = function(){ this.style.background = oldColor; } }; //添加和删除 var oBtn = document.getElementById(‘btn1‘); var oTxt = document.getElementById(‘txt1‘); var iNowId = tb.tBodies[0].rows.length+1; oBtn.onclick = function(){ var oTr = document.createElement(‘tr‘); var oTd = null; oTd = document.createElement(‘td‘); oTd.innerHTML = iNowId++; oTr.appendChild(oTd); oTd = document.createElement(‘td‘); oTd.innerHTML = oTxt.value; oTr.appendChild(oTd); oTd = document.createElement(‘td‘); oTd.innerHTML =‘<a href="javascript:void(0);">删除</a>‘; oTr.appendChild(oTd); oTd.getElementsByTagName(‘a‘)[0].onclick = function(){ tb.tBodies[0].removeChild(this.parentNode.parentNode); } tb.tBodies[0].appendChild(oTr); } //搜索功能(应该算是精确搜索) var oBtn2 = document.getElementById(‘btn2‘); var oTxt2 = document.getElementById(‘txt2‘); oBtn2.onclick=function(){ for(var i=0;i<tb.tBodies[0].rows.length;i++){ var sValueInTb = tb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); var sValueInTxt = oTxt2.value.toLowerCase().split(‘ ‘); if(sValueInTb==sValueInTxt){ tb.tBodies[0].rows[i].style.background = ‘red‘; } else{ tb.tBodies[0].rows[i].style.background = ‘‘; } } } //试试 var str = ‘aaa blue‘; var arr = str.split(‘ ‘); var str2 = ‘aaa is a person‘; var sFound = false; for(var i=0;i<arr.length;i++){ if(str2.search(arr[i])!=-1){ sFound = true; } } alert(sFound); //搜索功能（模糊查询） var oBtn3 = document.getElementById(‘btn3‘); var oTxt2 = document.getElementById(‘txt2‘); oBtn3.onclick=function(){ for(var i=0;i<tb.tBodies[0].rows.length;i++){ var sValueInTb = tb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); var sValueInTxt = oTxt2.value.toLowerCase().split(‘ ‘); var sFound = false; for(var j=0;j<sValueInTxt.length;j++){ if(sValueInTb.search(sValueInTxt[j])!=-1){ sFound = true; break; } } if(sFound){ tb.tBodies[0].rows[i].style.background = ‘red‘; } else{ tb.tBodies[0].rows[i].style.background = ‘‘; } } }}</script></head><body> <input type="text" id="txt1"> <input type="button" id="btn1" value=http://www.mamicode.com/"添加"> <input type="text" id="txt2"> <input type="button" id="btn2" value=http://www.mamicode.com/"精确搜索"><input type="button" id="btn3" value=http://www.mamicode.com/"模糊搜索"> <table border="1" width="450" id="tb"> <thead> <Tr> <Td>ID</Td> <Td>姓名</Td> <Td>操作</Td> </Tr> </thead> <tbody> <tr> <Td>1</Td> <Td>abe</Td> <Td></Td> </tr> <tr> <Td>2</Td> <Td>a春春</Td> <Td></Td> </tr> <tr> <Td>3</Td> <Td>b一流</Td> <Td></Td> </tr> <tr> <Td>4</Td> <Td>贰万</Td> <Td></Td> </tr> <tr> <Td>5</Td> <Td>aaa</Td> <Td></Td> </tr> <tr> <Td>6</Td> <Td>blue</Td> <Td></Td> </tr> </tbody> </table></body></html>
表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。