JavaScript-DOM操作高階應用
阿新 • • 發佈:2019-01-06
表格應用
獲取
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、後臺資料檢查