oTable.tHead 获取表格里面 tHead 的元素
oTable.tBodies 获取表格里面 tbody ,返回集合
oTable.tFoot 获取表格里面 tfoot 的元素
oTable.rows 获取表格里面行 tr
oTable.cells 获取表格里面列 td
使用实例:
oTable.tBodies[0] oTable.tHead[0] oTable.tFoot[0] oTable.rows[1] oTable.cells[1]
var aTh = oTable.tHead.rows[0].cells;
var aRow = oTable.tBodies[0].rows;
遍历:
var oTable=document.getElementById("表格id");
oTable.tBodies[0]可以看成是rows和cells组成的二维数组,用两个for循环嵌套遍历一下就可以了
遍历案例:
提示:您可以先修改部分代码再运行
示例如下:
<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>