注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

HTML 中表格table 的相关知识  

2010-09-17 15:41:04|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
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 有效)

经典的表格代码如下:

<style type="text/css">
.datalist{border:1px solid #429fff;font-family:arial;border-collapse:collapse;}
.datalist tr:hover{background-color:#c4e4ff;}/* 动态变色,IE6下无效!*/
.datalist caption{background-color:#f0f7ff;border:1px solid #429fff;padding-bottom:2px;padding-top:3px;font:bold 1.1em;text-align:center;}
.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>
<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>

效果图如下:
HTML 中表格table 的相关知识 - 郭培 - 前端工程师 郭培的博客

注意:

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

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

利用DOM 动态添加一行 

<script type="text/javascript">
window.onload=function(){
 oTr = document.getElementById("mytable").insertRow(1);
 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>

效果图如下:
HTML 中表格table 的相关知识 - 郭培 - 前端工程师 郭培的博客

利用DOM 修改单元格内容

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

效果图如下:
HTML 中表格table 的相关知识 - 郭培 - 前端工程师 郭培的博客

利用DOM删除一行

<script type="text/javascript">
window.onload=function(){
 oTable = document.getElementById("mytable");
 oTable.deleteRow(2);
}
</script>

效果图如下:
HTML 中表格table 的相关知识 - 郭培 - 前端工程师 郭培的博客

利用DOM删除一个单元格

<script type="text/javascript">
window.onload=function(){
 oTable = document.getElementById("mytable");
 oTable.rows[2].deleteCell(1);
}
</script>

效果图如下:
HTML 中表格table 的相关知识 - 郭培 - 前端工程师 郭培的博客

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

<script type="text/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;
 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>

效果图如下:
HTML 中表格table 的相关知识 - 郭培 - 前端工程师 郭培的博客

利用DOM 动态删除某一列

<script type="text/javascript">
function deleteColumn(oTable,iNum){
 var oTable = document.getElementById(oTable);
 for(var i=0;i<oTable.rows.length;i++){
  oTable.rows[i].deleteCell(iNum);
 }
}
window.onload=function(){
 deleteColumn("mytable",2);
}
</script>

效果图如下:
HTML 中表格table 的相关知识 - 郭培 - 前端工程师 郭培的博客

来源:http://www.cnblogs.com/xugang/

  评论这张
 
阅读(846)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018