简明现代魔法 -> HTML超文本标记语言 -> 使用DOM动态操作表格

使用DOM动态操作表格

2010-08-13

了解下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>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们