HTML中表格相关的知识
导读
<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> </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>显示效果如下：
注意：
IE6 只有<a>标记支持:hover 伪类，其余标签都不支持！
并且<a>标记的伪类有顺序：a:link -> a:visited -> a:hover -> a:active
利用DOM 的方法和属性实现对表格的动态操作
1、利用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>2、 利用DOM 修改单元格内容
<script language="javascript">
window.onload=function(){
var oTable = document.getElementById("mytable");
//修改单元格内容
oTable.rows[3].cells[4].innerHTML = "更改的内容";
}
</script>3、利用DOM 删除一个单元格或一行
<script language="javascript">
window.onload=function(){
var oTable = document.getElementById("mytable");
//删除一行，后面的行号自动补齐
oTable.deleteRow(2);
//删除一个单元格，后面的也自动补齐
oTable.rows[2].deleteCell(1);
}
</script>4、利用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>5、利用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>
猜你喜欢
评论(0)
