DOM对表格的操作
js 获取表格
var obj = document.getElementById(id);
obj.tBodies[0]=obj.getElementsByTagName('tbody')[0];
obj.tBodies[0].rows[1].cells[1]=obj.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1];
tBodies 表的内容返回的是一个数组
rows 表的内容返回的是一个数组
cells 表的内容返回的是一个数组
thead
tFoot
鼠标移动
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>DOM对表格的操作</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑'; font-size:12px;
}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
list-style:none;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var oTab = document.getElementById('tab1');
var oColor = '';
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
oTab.tBodies[0].rows[i].style.background='#f2f2f2';
oTab.tBodies[0].rows[i].onmouseover = function(){
oColor = this.style.background;
this.style.background='#fbfce2';
};
oTab.tBodies[0].rows[i].onmouseout = function(){
this.style.background=oColor;
};
}
}
</script>
<table id='tab1' border='1' width='400'>
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>李思</td>
<td>26</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>22</td>
</tr>
<tr>
<td>5</td>
<td>李嗨</td>
<td>22</td>
</tr>
<tr>
<td>6</td>
<td>张思</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html>
添加删除
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>DOM对表格的操作</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑'; font-size:12px;
}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
list-style:none;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var oTab = document.getElementById('tab1');
var name = document.getElementById('text1');
var age = document.getElementById('text2');
var oBtn = document.getElementById('btn');
var id = oTab.tBodies[0].rows.length + 1;
oBtn.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 = name.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = age.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = '<a href=\'javascript:\'>删除</a>';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick = function(){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
oTab.tBodies[0].appendChild(oTr);
}
}
</script>
姓名：<input type='text' id='text1' value=''>
年龄：<input type='text' id='text2' value=''>
<input type='button' id='btn' value='添加'>
<table id='tab1' border='1' width='400'>
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李思</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>李嗨</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>张思</td>
<td>22</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
对表格进行搜索
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>DOM对表格进行搜索</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑'; font-size:12px;
}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
list-style:none;
}
</style>
</head>
<body>
<script type="text/javascript">
/*
search() 方法用于检索字符串中指定的子字符串
search() //找到字符串出现的位置，没有找到放回-1
*/
window.onload = function(){
var oTab = document.getElementById('tab1');
var name = document.getElementById('text1');
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
var str1 = name.value.toLowerCase();
var str2 = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
if(str2.search(str1)!=-1){
oTab.tBodies[0].rows[i].style.background ='red'; //搜索结果也可以用display：block 先显示
}else{
oTab.tBodies[0].rows[i].style.background =''; //不是的可以用diaplay:none来隐藏
}
}
};
}
</script>
姓名：<input type='text' id='text1' value=''>
<input type='button' id='btn' value='搜索'>
<table id='tab1' border='1' width='400'>
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>李思</td>
<td>26</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>22</td>
</tr>
<tr>
<td>5</td>
<td>李嗨</td>
<td>22</td>
</tr>
<tr>
<td>6</td>
<td>张思</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html>
