Html中表格Table的相关知识

经典的表格代码如下： 

        2005

        2006

        2007

        2008

        拨款

        捐款

        投资

        募捐

       2008 年统计

显示效果如下：

IE6 只有标记支持:hover 伪类，其余标签都不支持！并且标记的伪类有顺序：a:link -> a:visited -> a:hover -> a:active

利用DOM 的方法和属性实现对表格的动态操作

利用DOM 动态添加一行：

window.onload=function(){

    //插入一行

    var oTr = document.getElementById("mytable").insertRow(2);

    var aText = new Array();

    aText[0] = document.createTextNode("cell1的内容");

    aText[1] = document.createTextNode("cell2的内容");

    aText[2] = document.createTextNode("cell3的内容");

    aText[3] = document.createTextNode("cell4的内容");

    aText[4] = document.createTextNode("cell5的内容");

    for(var i=0;i        var oTd = oTr.insertCell(i);

        oTd.appendChild(aText[i]);

    }

}

利用DOM 修改单元格内容：

window.onload=function(){

    var oTable = document.getElementById("mytable");

    //修改单元格内容

    oTable.rows[3].cells[4].innerHTML = "更改的内容";

}

利用DOM 删除一个单元格或一行：

window.onload=function(){

    var oTable = document.getElementById("mytable");

    //删除一行，后面的行号自动补齐

    oTable.deleteRow(2);

    //删除一个单元格，后面的也自动补齐

    oTable.rows[2].deleteCell(1);

}

利用DOM 动态添加一列，并动态删除某行：

function myDelete(){

    var oTable = document.getElementById("mytable");

    //删除该行

    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

}

window.onload=function(){

    var oTable = document.getElementById("mytable");

    var oTd;

    //动态添加delete链接

    for(var i=1;i        oTd = oTable.rows[i].insertCell(5);

        oTd.innerHTML = "delete";

        oTd.firstChild.onclick = myDelete; //添加删除事件

    }

}

利用DOM 动态删除某一列：

function deleteColumn(oTable,iNum){

    //自定义删除列函数，即每行删除相应单元格

    for(var i=0;i        oTable.rows[i].deleteCell(iNum);

}

window.onload=function(){

    var oTable = document.getElementById("mytable");

    deleteColumn(oTable,2); //参数2:表示要删除的列号

}

Html中表格Table的相关知识

标签中比较少见的属性和子标签：summary属性：用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。bordercolor属性：用来设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。（不推荐使用bordercolor属性，而推荐使用CSS样式表的border属性来进行设置）cellspacing属性：用来设置表格的单元格之间的间距。（推荐使用CSS样式表的border-collapse属性来进行设置）标记：表示表格的大标题，该标记可以出现在之间的任意位置。它对于搜索引擎的

推荐度：

点击下载本文 文档为doc格式

产品服务 发展历程 企业资讯 企业文化 关于我们 加入我们 联系我们 网站导航 网站律师

• 
• 
• 
• 
• 

  中国扫黄打非网

Copyright © 2019-2025 51dongshi.net 版权所有

赣ICP备2023002352号-34

违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务