DOM-表格变色添加删除搜索
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM-表格变色添加删除搜索相关的知识，希望对你有一定的参考价值。
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、表格搜索
以上是关于DOM-表格变色添加删除搜索的主要内容，如果未能解决你的问题，请参考以下文章
DOM设置表格隔行变色js代码及鼠标悬停在哪行，哪行字体就加粗效果