XuGang

记录一个程序员的成长

 

HTML 中表格table 的相关知识

 

<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 有效）

 

经典的表格代码如下：

<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>&nbsp;</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
销售 28,400 27,100 27,950 29,050
杂费 2,100 1,900 1,300 1,760
总计 58,460 57,859 58,110 60,700
2008 年统计

注意：

IE6 只有<a>标记支持:hover 伪类，其余标签都不支持！

并且<a>标记的伪类有顺序：a:link -> a:visited -> a:hover -> a:active


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

 

A  利用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>

 

B  利用DOM 修改单元格内容

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

 

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

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

 

D  利用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>

 

E  利用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>

完毕。

 

posted on 2010-08-11 14:37  钢钢  阅读(12810)  评论(19)  编辑  收藏  举报

导航