首页 > 代码库 > DOM-表格变色、添加、删除、搜索
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="http://www.mamicode.com/添加">
<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-表格变色、添加、删除、搜索
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。