JavaScript DOM对表格的操作

表格简单又不简单
服务器君一共花费了496.157 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

了解下table的属性与子标签

  • summary 属性:用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。
  • bordercolor 属性:用来设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。(不推荐使用bordercolor 属性,而推荐使用CSS 样式表的border 属性来进行设置)
  • cellspacing 属性:用来设置表格的单元格之间的间距。(推荐使用CSS 样式表的border-collapse 属性来进行设置)
  • <caption> 标记:表示表格的大标题,该标记可以出现在<table>之间的任意位置。它对于搜索引擎的机器人记录信息十分重要。
  • <th>标记:用于表示表格的行或者列的名称。
  • <th>标记的scope属性:专门用来区分行名称和列名称。如:<th scope='row'> 或 <th scope='col'>

<table>里还包含:<thead> 、<tbody> 、<tfoot> 标记。它们分别表示表格的表头,表正文,表脚。在打印网页内容的时候,如果表格很大,一页打印不完,<thead>和<tfoot>将在每一页出现。(注意:在IE 中无效,但在 Firefox 有效)/p>

一个表格例子

<html>
<head>
<title>报表</title>
<style type="text/css">
<!--
.datalist{
    border:1px solid #429fff;    /* 表格边框 */
    font-family:Arial;
    border-collapse:collapse;    /* 边框重叠 */
}
.datalist tr:hover{
    background-color:#c4e4ff;   /* 动态变色,IE6下无效!*/
}
.datalist caption{
    padding-top:3px;
    padding-bottom:2px;
    font:bold 1.1em;
    background-color:#f0f7ff;
    border:1px solid #429fff;    /* 表格标题边框 */
}
.datalist th{
    border:1px solid #429fff;    /* 行、列名称边框 */
    background-color:#d2e8ff;
    font-weight:bold;
    padding-top:4px; padding-bottom:4px;
    padding-left:10px; padding-right:10px;
    text-align:center;
}
.datalist td{
    border:1px solid #429fff;    /* 单元格边框 */
    text-align:right;
    padding:4px;
}
-->
</style>
</head>
<body> 
<table class="datalist" summary="财政报表">
    <caption>报表 2005 - 2008</caption>
    <thead>
    <tr>
        <th> </th>
        <th scope="col">2005</th>
        <th scope="col">2006</th>
        <th scope="col">2007</th>
        <th scope="col">2008</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">拨款</th>
        <td>11,980</td>
        <td>12,650</td>
        <td>9,700</td>
        <td>10,600</td>
    </tr>
    <tr>
        <th scope="row">捐款</th>
        <td>4,780</td>
        <td>4,989</td>
        <td>6,700</td>
        <td>6,590</td>
    </tr>
    <tr>
        <th scope="row">投资</th>
        <td>8,000</td>
        <td>8,100</td>
        <td>8,760</td>
        <td>8,490</td>
    </tr>
    <tr>
        <th scope="row">募捐</th>
        <td>3,200</td>
        <td>3,120</td>
        <td>3,700</td>
        <td>4,210</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
       <td colspan="5">2008 年统计</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

表格显示如下:

报表 2005 - 2008
2005 2006 2007 2008
拨款 11,980 12,650 9,700 10,600
捐款 4,780 4,989 6,700 6,590
投资 8,000 8,100 8,760 8,490
募捐 3,200 3,120 3,700 4,210
2008 年统计

注意:IE6 只有<a>标记支持:hover 伪类,其余标签都不支持!并且<a>标记的伪类有顺序:a:link -> a:visited -> a:hover -> a:active

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

利用DOM 动态添加一行:

<script language="javascript">
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<aText.length;i++){
        var oTd = oTr.insertCell(i);
        oTd.appendChild(aText[i]);
    }
}
</script>

利用DOM 修改单元格内容:

<script language="javascript">
window.onload=function(){
    var oTable = document.getElementById("mytable");
    //修改单元格内容
    oTable.rows[3].cells[4].innerHTML = "更改的内容";
}
</script>

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

<script language="javascript">
window.onload=function(){
    var oTable = document.getElementById("mytable");
    //删除一行,后面的行号自动补齐
    oTable.deleteRow(2);
    //删除一个单元格,后面的也自动补齐
    oTable.rows[2].deleteCell(1);
}
</script>

利用DOM 动态添加一列,并动态删除某行:

<script language="javascript">
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<oTable.rows.length;i++){
        oTd = oTable.rows[i].insertCell(5);
        oTd.innerHTML = "<a href='#'>delete</a>";
        oTd.firstChild.onclick = myDelete; //添加删除事件
    }
}
</script>

利用DOM 动态删除某一列:

<script language="javascript">
function deleteColumn(oTable,iNum){
    //自定义删除列函数,即每行删除相应单元格
    for(var i=0;i<oTable.rows.length;i++)
        oTable.rows[i].deleteCell(iNum);
}
 
window.onload=function(){
    var oTable = document.getElementById("mytable");
    deleteColumn(oTable,2); //参数2:表示要删除的列号
}
</script>

本文地址:http://www.nowamagic.net/librarys/veda/detail/456,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/456

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《程序员修炼之道:从小工到专家》 亨特(Andrew Hunt) (作者), 托马斯(David Thomas) (作者), 马维达 (译者)

《程序员修炼之道:从小工到专家》内容简介:《程序员修炼之道》由一系列独立的部分组成,涵盖的主题从个人责任、职业发展,知道用于使代码保持灵活、并且易于改编和复用的各种架构技术,利用许多富有娱乐性的奇闻轶事、有思想性的例子及有趣的类比,全面阐释了软件开发的许多不同方面的最佳实践和重大陷阱。无论你是初学者,是有经验的程序员,还是软件项目经理,《程序员修炼之道:从小工到专家》都适合你阅读。

更多计算机宝库...