DOM操作应用高级
表格应用 -1
获取
tBodies（数组），tHead（一个元素），tFood（一个元素），rows，cells
隔行变色（鼠标移入高亮）
/*小例子
隔行变色，鼠标移入变色移出还原*/
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='green';
}
oTab.tBodies[0].rows[i].onmouseout=function(){
this.style.background=oldcolor;
}
//隔行变色
if(i%2)
{
oTab.tBodies[0].rows[i].style.background='';
}
else
{
oTab.tBodies[0].rows[i].style.background='#CCC';
}
}
};
添加，删除一行
DOM方法的使用
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; //防止ID重用
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); //从tbody中删而不是table中删tBodies千万不能忘
};
oTab.tBodies[0].appendChild(oTr);
};
};
表格应用 -2
搜索
版本1：基础版本——字符串比较
版本1：忽略大小写——大小写转换
版本1：模糊搜索——search的使用（找到并返回字符串出现的位置，没找到则返回-1）
版本1：多关键词——split
高亮显示，筛选
window.onload=function(){
var oTab=document.getElementById('tab1');
var oTxt=document.getElementById('name');
var oBtn=document.getElementById('btn1');
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(' '); //用split分隔符将输入的关键字分割成关键字数组
oTab.tBodies[0].rows[i].style.background='';
//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.background='yellow';
//oTab.tBodies[0].rows[i].style.display='block'; //筛选
}
else
{
oTab.tBodies[0].rows[i].style.background='';
}
}
}
};
};
排序
移动li
元素排序：转换——排序——插入
/*移动li*/
window.onload=function(){
var oUl1=document.getElementById('ul1');
var oUl2=document.getElementById('ul2');
var oBtn=document.getElementById('btn1');
//每点击一下移动按钮，就把Ul1的第一个子节点li放进Ul2中
oBtn.onclick=function(){
var oLi=oUl1.children[0];
oUl2.appendChild(oLi); //1.先把元素从原有的父级上删掉 2.添加到新的父级上
};
};
/*元素排序：转换——排序——插入*/
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++)
{
//oTab.tBodies[0].rows实际上是元素集合,要使用Array特有的sort排序,必须将其转换成Array数组
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]);
}
};
};
表单应用 -1
表单基础知识
什么是表单？
向服务器提交数据，比如：用户注册
action
提交到哪里去
<form action="http://www.baidu.com">
<!--前台通过id来查找元素，后台通过name来查找元素-->
用户名：<input type="text" name="user"/><br>
密码：<input type="password" name="pass" /><br>
<input type="submit" />
</form>
表单事件
onsubmit 提交时发生
onreset 重置时发生
表单应用 -2
表单内容验证
阻止用户输入非法字符 阻止事件
输入时，失去焦点时验证 onkeyup，onblur
提交时检查 onsubmit
*后台数据检查