表格应用
获取
tBodies、tHead、tFoot、rows、cells
隔行变色
鼠标移入高亮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var oTab=document.getElementById('tab1');
var oldColor='';
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].onmouseover=function(){
oldColor=this.style.background;
this.style.background='yellow';
};
oTab.tBodies[0].rows[i].onmouseout=function(){
this.style.background=oldColor;
};
if(i%2)
{
oTab.tBodies[0].rows[i].style.background='gray';
}
else
{
oTab.tBodies[0].rows[i].style.background='';
}
}
};
</script>
</head>
<body>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>周二</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>添加、删除一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
var oName=document.getElementById('name');
var oAge=document.getElementById('age');
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=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:;">删除</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>
姓名：<input id="name" type"text"/>
年龄：<input id="age" type="text"/>
<input id="btn1" value="添加" type="button"/>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>周二</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>DOM方法的使用
搜索
模糊搜索（search）//找到并返回字符串位置，未找到返回-1
忽略大小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('name');
oBtn.onclick=function(){
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
// var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML;
// var sTxt=oTxt.value;
// if(sTab.toLowerCase()==sTxt.tolowerCase())
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt=oTxt.value.toLowerCase();
if(sTab.search(sTxt)!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
else
{
oTab.tBodies[0].rows[i].style.background='';
}
}
};
};
</script>
</head>
<body>
姓名：<input id="name" type"text"/>
<input id="btn1" value="搜素" type="button"/>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>周二</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>多关键字
<script>
window.onload=function(){
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('name');
oBtn.onclick=function(){
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt=oTxt.value.toLowerCase();
var arr=sTxt.split(' ');
if(sTab.search(sTxt)!=-1)
oTab.tBodies[0].rows[i].style.background='';
for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
}
}
};
};
</script>筛选
<script>
window.onload=function(){
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('name');
oBtn.onclick=function(){
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt=oTxt.value.toLowerCase();
var arr=sTxt.split(' ');
oTab.tBodies[0].rows[i].style.display='none';
for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.display='block';
}
}
}
};
};
</script>排序
//移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var oUl1=document.getElementById('ul1');
var oUl2=document.getElementById('ul2');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
var oLi=oUl1.children[0];
//oUl1.removeChild(oLi);
oUl2.appendChild(oLi);//先把元素从原有父级上删掉，添加到新的父级上
//oUl1.appendChild(oLi);//把元素从前插到后面
};
};
</script>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input id="btn1" type="button" value="移动"/>
<ul id="ul2">
</ul>
</body>
</html>//排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var oUl1=document.getElementById('ul1');
var oUl2=document.getElementById('ul2');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
var aLi=oUl1.getElementsByTagName('li');
var arr=[];
for(var i=0;i<aLi.length;i++ )
{
arr[i]=aLi[i];
}
arr.sort(function(li1,li2){
var n1=parseInt(li1.innerHTML)
var n2=pareInt(li2.innerHTML)
return n1-n2;
});
for(var i=0;i<arr.length;i++)
{
oUl1.appendChild(arr[i]);
}
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="排序"/>
<ul id="ul1">
<li>34</li>
<li>5</li>
<li>9</li>
<li>88</li>
<li>54</li>
</ul>
</body>
</html>
//排序2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
var arr=[];
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
arr[i]=oTab.tBodies[0].rows[i];
}
arr.sort(function(tr1,tr2){
var n1=parseInt(tr1.cells[0].innerHTML);
var n2=parseInt(tr2.cells[0].innerHTML);
return n1-n2;
});
for(var i=0;i<arr.length;i++)
{
oTab.tBodies[0].appendCHild(arr[i]);
}
};
</script>
</head>
<body>
<input id="btn1" value="排序" type="button"/>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>周二</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>表单应用
action
onsubmit
表单内容验证
1、阻止用户输入非法字符 阻止事件
2、输入时、失去焦点时验证 onkeyup 、onblur
3、提交时检查 onsubmit
*4、后台数据检查