DOM的高级操作——表单的添加/删除/获取
1 表格应用-1
①获取表单元素
应用1:弹出“张三”
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<script>
window.οnlοad=function()
{
var oTab=document.getElementById('tab1');
//弹出“张三”
alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[1].innerHTML);
};
</script>
</head>
<body>
<table id="tab1" border="1px" width="500px">
<thead>
<th>ID</th>
<th>姓名</th>
<th>内容</th>
<th>发布时间</th>
<th>操作</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>新年快乐</td>
<td></td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>sdaskdkla</td>
<td></td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>237189378</td>
<td></td>
<td><a href="javascript:;">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
可以用最初的方法getElementById或者getElementsByTagName来获取表单元素,只是较为冗长些。其实在DOM中有专有名词代替我们之前使用的方法:①tBodies等同于getElementsByTagName(‘tbody’); ②rows等同于getElementsByTagName(‘tr’) ③cells等同于getElementsByTagName(‘td’) ④tHead:表头 ⑤tFoot:表尾
所以我们可以将上述案例中的alert写成:
alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
应用2:表单隔行变色(在上述案例的基础上添加了几行信息)
window.οnlοad=function()
{
var oTab=document.getElementById('tab1');
//alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
if(i%2==0)
{
oTab.tBodies[0].rows[i].style.background="gray";
}
else
{
oTab.tBodies[0].rows[i].style.background="";
}
}
};
应用3:当鼠标移入时,鼠标所在行的背景颜色为黄色。当鼠标移除时,表单恢复原貌。(方便阅读)
window.οnlοad=function()
{
var oTab=document.getElementById('tab1');
var oldColor='';
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
if(i%2==0)
{
oTab.tBodies[0].rows[i].style.background="gray";
}
else
{
oTab.tBodies[0].rows[i].style.background="";
}
oTab.tBodies[0].rows[i].οnmοuseοver=function()
{
oldColor=this.style.background;
this.style.background='yellow';
};
oTab.tBodies[0].rows[i].οnmοuseοut=function()
{
this.style.background=oldColor;
};
}
};
注意:我们需将原有的背景颜色提前存储起来,便于恢复原貌时使用。
②表单的添加/删除
应用:将这篇博客的第一个小案例改成类似微博的功能:①可以随时发布新的微博信息,并显示信息发布时间。②每次新发布的的微博信息必须插在列表首位,方便及时阅读。③可以随时删除不需要的微博信息。(js是前端脚本语言不具有保存功能,在日后学习PHP和数据库后,我们再继续补充其功能)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM:表单</title>
<script>
function toDou(n)
{
if(n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
}
window.οnlοad=function()
{
var oTxt1=document.getElementById("txt1");
var oTxt2=document.getElementById("txt2");
var oBtn=document.getElementById("btn1");
var oTab=document.getElementById('tab1');
//获取系统时间
var oDate=new Date();
var iYear=oDate.getFullYear();//年
var iMonth=oDate.getMonth();//月
var iDate=oDate.getDate();//日
var str=''+iYear+'-'+toDou(iMonth+1)+'-'+toDou(iDate)
+' '+toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'+toDou(oDate.getSeconds());
var id1=oTab.tBodies[0].rows.length+1;
oBtn.οnclick=function()
{
var oTr=document.createElement('tr');
var oTd=document.createElement('td');
oTd.innerHTML=id1++;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oTxt1.value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oTxt2.value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=str;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML='<a href="javascript:;">删除</a>';
oTr.appendChild(oTd);
oTab.tBodies[0].appendChild(oTr);
oTd.getElementsByTagName('a')[0].οnclick=function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
};
};
};
</script>
</head>
<body>
姓名:<input type="text" id="txt1" />
内容:<input type="text" id="txt2" />
<input type="button" id="btn1" value="添加"/>
<br/><br/>
<table id="tab1" border="1px" width="500px">
<thead>
<th>ID</th>
<th>姓名</th>
<th>内容</th>
<th>发布时间</th>
<th>操作</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>