js对Table表格的操作
对于表格 Table javascript也提供了一些操作方法
oTable.tHead 获取表格里面 tHead的元素
oTable.tBodies 获取表格里面正文的元素
oTable.tFoot 获取表格里面的底部元素
rows 行
cells 列
示例如下:
<script language="javascript">
window.onload=function()
{
var oTable=document.getElementById("oTable");//获取页上面的表格对象
//打印正文->第二行->第三列的数据
console.log( oTable.oTable.tBodies[0].rows[1].cells[2].innerHTML);
}
</script>实例开发
<table width="600" cellpadding="0" cellspacing="0" border="1">
<thead>
<tr style="background:red;">
<th width="10%">编号</th>
<th>标题</th>
<th width="15%">作者</th>
<th width="12%">管理</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script language="javascript">
window.onload=function()
{
var data=[
{"id":1,"title":"时间都去哪儿了","attr":"王铮亮"},
{"id":2,"title":"花开那年","attr":"魏晨"},
{"id":3,"title":"偶尔还是会想起你","attr":"牛奶咖啡"},
{"id":4,"title":"别让爱迷路","attr":"姚晨"},
{"id":5,"title":"想听听你说谎","attr":"金莎"},
{"id":6,"title":"致亲爱的","attr":"樊凡"},
];
var oTable=document.getElementsByTagName("table")[0];
var tBodies=oTable.tBodies[0];
for(var i=0;i<data.length;i++)
{
var oTr=document.createElement("tr");
if(i % 2 ==0)
{
oTr.style.background="#ffffff";
}
else
{
oTr.style.background="#cccccc";
}
//创建第一列 编号
var oTd=document.createElement("td");
oTd.innerHTML=data[i]["id"];
oTr.appendChild(oTd);
//创建第二列 标题
oTd=document.createElement("td");
oTd.innerHTML=data[i]["title"];
oTr.appendChild(oTd);
//创建第三列 作者
oTd=document.createElement("td");
oTd.innerHTML=data[i]["attr"];
oTr.appendChild(oTd);
//创建第四列 管理
oTd=document.createElement("td");
var oA=document.createElement("a");
oA.innerHTML="删除";
oA.href="javascript:;";
//给超连接设置一个事件
oA.onclick=function()
{
//获取超连接 <a> 的父级的父级节点 也就是 <tr>节点
var a=this.parentNode.parentNode;
tBodies.removeChild(a);//通过tBodies对象进行删除....
//获取正文下面的所有 tr元素
//并重新设置背景色 以达隔行换色的效果
var oList=tBodies.children;
for(var j=0;j<oList.length;j++)
{
var obj=oList[j];
if(j % 2 ==0)
{
obj.style.background="#ffffff";
}
else
{
obj.style.background="#cccccc";
}
}
}
oTd.appendChild(oA);
oTr.appendChild(oTd);
//把<tr>追到加正文下面 设置为子节点元素
tBodies.appendChild( oTr );
}
}
</script>
