首页 > 建站教程 > JS、jQ、TS >  js对table表格的操作正文

js对table表格的操作

JavaScript对于表格 Table 提供了一些简便操作方法:

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>