1、表格，隔行变色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var otab=document.getElementById(‘tb1‘)
// otab.tBodies[0].rows[].cells[]
var oldColor=‘‘
for (var i = otab.tBodies[0].rows.length - 1; i >= 0; i--) {
if(i%2){
otab.tBodies[0].rows[i].style.background=‘red‘
}else{
otab.tBodies[0].rows[i].style.background=‘gray‘
}
otab.tBodies[0].rows[i].onmouseover=function(){
oldColor=this.style.background
this.style.background=‘green‘
}
otab.tBodies[0].rows[i].onmouseout=function () {
this.style.background=oldColor
}
}
}
</script>
</head>
<body>
<!-- table[id=‘tb1‘ border="1" width="500">thead>td*3+tbody>(tr>td*3)*3 -->
<table id="tb1" border="1" width="500">
<thead>
<td>ID</td>
<td>name</td>
<td>age</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>cxiong</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>mm</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>dd</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>2、表格的行的添加和删除
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var otab=document.getElementById(‘tb1‘)
// otab.tBodies[0].rows[].cells[]
var ob=document.getElementById(‘b1‘)
var oname=document.getElementById(‘name‘)
var oage=document.getElementById(‘age‘)
var id=otab.tBodies[0].rows.length+1
ob.onclick=function () {
var otr=document.createElement(‘tr‘)
var otd=document.createElement(‘td‘)
otd.innerHTML=id++
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:">delete</a>‘
otr.appendChild(otd)
otd.getElementsByTagName(‘a‘)[0].onclick=function () {
otab.tBodies[0].removeChild(this.parentNode.parentNode)
}
otab.tBodies[0].appendChild(otr)
}
}
</script>
</head>
<body>
<!-- table[id=‘tb1‘ border="1" width="500">thead>td*3+tbody>(tr>td*3)*3 -->
name: <input type="text" id="name">
age: <input type="text" id="age">
<input type="button" id="b1" value="添加">
<table id="tb1" border="1" width="500">
<thead>
<td>ID</td>
<td>name</td>
<td>age</td>
<td>action</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>cxiong</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>mm</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>dd</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>3、表格搜索
原文地址：http://f1yinsky.blog.51cto.com/12568071/1939403
