js对Table表格的操作

Posted 2020-07-03

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>