function init(){
theT=createTable("我的收藏夹",["Group:150","Name:300","URL:200","Visited:100","Modify:100","Delete:100"]);
//参数说明:createTable(strCaption,colHeads)
//strCaption 标题
//colHeads 是一个array,每个item的格式是 名称:宽度 的字符串
}
function createTable(strCaption,colHeads){
//参数说明:colHeads 是一个array,每个item的格式是 名称:宽度 的字符串
//生成表格
oTable=document.createElement("table");
document.body.insertBefore(oTable);
//设置class
oTable.className="table0";
with(oTable.style){
tableLayout="fixed";
borderCollapse="collapse"
borderSpacing="0px";
}
//设置变量
oTCaption=oTable.createCaption();
oTHead=oTable.createTHead();
oTFoot=oTable.createTFoot();
//生成标题
oTCaption.innerText=strCaption;
//设置列宽
oTHead.insertRow();
for(var i=0;i<colHeads.length;i++){
tHeadName=colHeads[i].split(":")[0];
tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1]);
theCell=oTHead.rows[0].insertCell();
theCell.style.width=tHeadWidth;
}
theCell=oTHead.rows[0].insertCell();
theCell.width=20;
oTHead.rows[0].style.display="none";
//生成表头
oTHead.insertRow();
for(var i=0;i<colHeads.length;i++){
tHeadName=colHeads[i].split(":")[0];
tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1]);
theCell=oTHead.rows[1].insertCell();
theCell.innerText=tHeadName;
theCell.style.width=tHeadWidth;
}
theCell=oTHead.rows[1].insertCell();
theCell.width=24;
//生成表脚
oTFoot.insertRow();
theCell=oTFoot.rows[0].insertCell();
theCell.innerHTML="<marquee scrollDelay=50 scrollAmount=2>Copy rights 2005. Hutia presents.</marquee>";
theCell=oTFoot.rows[0].insertCell();
theCell.colSpan=colHeads.length-1;
theCell=oTFoot.rows[0].insertCell();
theCell.width=20;
//生成主体
// var tbody = document.getElementsByTagName('tbody')[0];
//var tbody = table.tBodies[0]
oTable.all.tags("Tbody")[0].insertRow();
theCell=oTable.all.tags("Tbody")[0].rows[0].insertCell();
theCell.colSpan=colHeads.length+1;
oMain=document.createElement("DIV");
theCell.insertBefore(oMain);
with(oMain.style){
width="100%";
height="100%";
overflowY="auto";
overflowX="hidden";
margin="0px";
marginLeft="-1px";
}
oTBody=document.createElement("table");
oMain.insertBefore(oTBody);
oTable.oTBody=oTBody;
//禁止选择
oTCaption.onselectstart=oTHead.onselectstart=oTFoot.onselectstart=function(){return(false);}
//设置class
oTBody.className="table1";
with(oTBody.style){
width=oTable.offsetWidth-15;
tableLayout="fixed";
borderCollapse="collapse"
borderSpacing="0px";
padding="0px";
margin="0px";
}
//初始化列宽
oTBody.insertRow();
for(var i=0;i<colHeads.length;i++){
tHeadWidth=isNaN(parseInt(colHeads[i].split(":")[1]))?"auto":parseInt(colHeads[i].split(":")[1]);
theCell=oTBody.rows[0].insertCell();
theCell.style.width=tHeadWidth;
}
oTBody.rows[0].style.display="none";
return(oTBody);
}
function insertRow(){
var intL=oTBody.rows.length;
theRow=oTBody.insertRow();
theRow.index=intL;
theRow.onmouseover=rowOnMouseOver;
theRow.onmouseout=rowOnMouseOut;
theRow.onclick=rowOnClick;
for(var i=0;i<colHeads.length;i++){
theCell=theRow.insertCell();
theCell.tabIndex=0;
theCell.hideFocus=true;
theCell.colIndex=i;
theCell.onmouseover=function(){this.focus();};
theCell.onmouseout=cellOnBlur;
theCell.onfocus=cellOnFocus;
theCell.onblur=cellOnBlur;
}
theRow.cells[0].innerText=strGroup?strGroup:"ROOT";
theRow.cells[1].innerText=strName?strName:"Untitled Document.";
theRow.cells[2].innerText=strURL?strURL:"Unspecified URL";
theRow.cells[3].innerHTML=strVisited?"Yes".fontcolor("red"):"Unknow";
theRow.cells[4].innerHTML=strModify?"Yes".fontcolor("red"):"No".fontcolor("Green");
theRow.cells[5].innerHTML="Delete".fontcolor("red");
}
分享到:
相关推荐
使用`<thead>`、`<tfoot>`和`<tbody>`标签的好处在于,它们提供了语义化的结构,有助于屏幕阅读器和搜索引擎理解表格的内容。此外,这些标签还允许开发者对表格的特定部分进行样式控制,比如固定表头或实现滚动效果...
2.thead, tbody, tfoot thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如,可以将所有列标题放在thead元素中,这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元
一个基本的Bootstrap表格由`<table>`标签开启,包含`<thead>`、`<tbody>`和`<tfoot>`等部分。`<thead>`用于定义表格的表头,`<tbody>`则包含表格的主要内容,`<tfoot>`则常用来显示总计或统计信息。 要实现表头固定...
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。 表格的分组显示(Structured Table) (IExplore Only) 一、按行分组 <thead> … </thead> – 表的题头(Header) <tbody> … </tbody> – 表的正文(Body) ...
一个基本的表格由`<table>`标签开始,内部包含`<thead>`(表头)、`<tbody>`(主体内容)和`<tfoot>`(页脚)等部分。表格的行用`<tr>`表示,单元格用`<td>`或`<th>`(表头单元格)表示。例如: ```html <table> ...
一个HTML表格由`<table>`元素开始,内部包含`<thead>`(表头)、`<tbody>`(主体内容)和`<tfoot>`(表尾)等部分。表头通常包含列标题,用于描述表格数据的类别。例如: ```html <table> <thead> 列1 列2 列...
表格通常由`<thead>`(表头)、`<tbody>`(表格主体)和`<tfoot>`(表脚)组成。例如: ```html <table id="scrollTable"> <thead> 列1 列2 列3 </thead> <tbody> <!-- 数据行 --> </tbody> </table> `...
一个HTML表格由`<table>`元素开启,包含`<tr>`(行)元素,`<td>`(单元格)或`<th>`(表头单元格)元素,以及可能的`<thead>`、`<tbody>`和`<tfoot>`部分。当表格嵌套时,一个`<td>`或`<th>`元素内部可以包含另一个...
它由多个子元素组成,包括`<thead>`(表头)、`<tbody>`(表体)和`<tfoot>`(表脚)。在处理表头固定的问题时,`<thead>`尤为重要,因为它包含表格的列名或标题。 为了实现表头固定,我们首先需要将`<thead>`和`...
"Table 表格 表头表尾浮动显示" 是一种优化表格用户体验的技术,它允许用户在滚动浏览长表格时,表头(thead)和表尾(tfoot)始终保持可见,方便用户对照和理解数据。这种技术尤其适用于移动端或者空间有限的界面,...
1. **HTML表格基础**:在HTML中,`<table>`元素是创建表格的基本结构,包括`<thead>`(表头)、`<tbody>`(主体)和`<tfoot>`(页脚)等部分。`<tr>`代表行,`<th>`是表头单元格,`<td>`则是数据单元格。 2. **CSS...
通过本文的学习,你应该能够熟练掌握`table`标签的基本用法以及如何使用`colspan`和`rowspan`属性来合并单元格,同时也了解了如何使用`<thead>`、`<tbody>`和`<tfoot>`标签来增强表格的语义性和可访问性。...
表格由`<table>`元素定义,包含表头`<thead>`,表体`<tbody>`,以及表脚`<tfoot>`(如果有的话)。固定表头通常需要将`<thead>`独立出来,以便在滚动时保持可见。表头中的行`<tr>`包含列标题`<th>`,而表体中的行`...
表格标签主要包含的标签有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup,针对每个的介绍如下: <table>table标签可定义表格。在 <table> 标签内部,你可以放置表格的标题、表格行、表格列、表格...
表格可以通过`<thead>`,`<tbody>`和`<tfoot>`元素来组织结构,分别代表表头、主体和表脚。 2. **JavaScript简介** JavaScript是一种运行在浏览器端的脚本语言,用于增加网页的交互性和动态性。通过JavaScript,...
HTML `<table>` 元素提供了构建表格的基础框架,包括 `<thead>`(表头)、`<tbody>`(表体)和 `<tfoot>`(表脚)等部分。例如: ```html <table id="myTable"> <thead> 姓名 年龄 城市 </thead> <tbody>...
### JavaScript操作Table的特性 #### 一、概述 在Web开发中,`<table>`元素是一种常见的HTML结构,用于展示数据。随着JavaScript的发展,我们可以通过脚本来动态地控制表格的行为和外观,从而实现更加丰富的用户...
通常,表格会被分为三个部分:表头(thead),表格体(tbody)和表尾(tfoot)。表头通常用于定义列名,表尾可以用于汇总信息,而tbody则是表格主体部分,包含了数据内容。将内容放在tbody中可以使得浏览器更高效地...
一个基本的表格由`<table>`元素包含,内部包括`<thead>`(表头)、`<tbody>`(表格主体)和`<tfoot>`(表尾)等部分。在`<thead>`中,`<tr>`表示行,`<th>`表示表头单元格,而`<tbody>`中的`<tr>`则表示数据行,`...
表格是网页中用于展示结构化数据的重要元素,由thead(表头)、tbody(主体内容)和tfoot(表脚)等部分组成。每个表格行使用标签,每行中的单元格使用或(表头单元格)标签。通过CSS可以对表格进行样式设计,使其...