您的位置：首页 > Web前端 > JavaScript

表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

2014-08-29 10:48 761 查看

　　看着网上的视频教程，虽说还是有点简单，但还是不免想记录下。这些操作包括（隔行变色，高亮显示，添加删除，搜索功能），而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几个方法，search方法，

split方法等等

　　效果体验：http://runjs.cn/detail/vm8bz8dl

　　demo下载

<!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="添加">
<input type="text" id="txt2">
<input type="button" id="btn2" value="精确搜索"><input type="button" id="btn3" value="模糊搜索">
<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航