HTML5+JavaScript节课总结

河南理工大学

HTML5+JavaScript

网页设计与网页特效制作

作品设计说明文档

2014 — 20##学年第 2 学期

课程名称 HTML5+JavaScript网页设计与网页特效制作

作品题目河南理工大学宣传网页

学生姓名

学号

专业班级电信1303班

联系电话

指导教师赵英刚

2015 年 7 月 5 日

1. 作品整体构思及网站（网页）的主体构想............................... 1

2. 作品总体设计方案及制作思路................................................... 1

3.主要技术及知识点的运用，难点问题的解决............................. 3

4.作品制作完成后的总结与感受..................................................... 4

5.谈谈你对HTML5、CSS3、JavaScript等web前端知识的认识5
6.学完本门课程后你对任课教师的意见和建议............................. 6
7.学生诚信承诺书............................................................................. 7
8.教师成绩评定................................................................................. 8

1.作品整体构思及网站（网页）的主体构想
      我的网站的构思是建一个基于HTML5，JavaScript和CSS3的网页开发应用技术的宣传网页，网站的主题思想是宣传河南理工大学。网站包括主页，学校介绍，图片欣赏，学院设置，以及联系我们。网站最大的特点是借助了CSS3的网页页面布局的应用技术是的网页的界面更具有可读性，从而使得网页的宣传力度更大，能够达到网页最终的目的。
2.作品总体设计方案及制作思路
      该网站属于企业机构宣传网站，网站包含外部网站的链接，例如通过网站左上角的connect可连接到河南理工大学的首页，包括部分的图片包含的学校官方网站的其他链接。
   在做网页之前，我确定了做网页的五个步骤：
   一、确定网站主题：网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。在这里我的网站主题就是宣传或者传销类网站。
   二、搜集材料：明确了网站的主题以后，你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。在这里我搜集了好多关于河南理工大学的图片，信息，并且去官网进行了详细的了解。
   三、规划网站：一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计一座大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。在规划方面我将网站的结构做成一页包含所有的内容，栏目的设置和大多数常见的网站并没有什么差别，但总体网站的风格还是比较新颖的，比如，网站的排版是经过精心的设计，而且采用了CSS3网页排版技术来达到完美的效果，通过点击网站的顶端的栏目，可以马上翻到该栏目的详细介绍中。我认为这是该网页最吸引人的特效。
   四、选择合适的制作工具：尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。在该网页设计中由于采用了CSS3的网页开发技术，所以没有选择老师上课中使用的软件。我使用的是当今的开发网页的主流软件—Adobe Dreamweaver CS6。Dreamweaver CS6是世界顶级软件厂商adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页（通常是标准通用标记语言下的一个应用HTML），对于初级人员，你可以无需编写任何代码就能快速创建web页面。其成熟的代码编辑工具更适用于web开发高级人员的创作！cs6新版本使用了自适应网格版面创建页面，在发布前使用多屏幕预览审阅设计,可大大提高工作效率。改善的 ftp 性能，更高效地传输大型文件。“实时视图”和“多屏幕预览”面板可呈现 html5 代码，更能够检查自己的工作。
   五、制作网页：材料有了，工具也选好了，下面就需要按照规划，一步一步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。
   网站包括主页，学校介绍，图片欣赏，学院设置，以及联系我们。制作思路，参照一些网页的排版，以及相应的代码拼组在一块，并且注入自己的编程设计，理解。组成你所看到的宣传网页。
3.主要技术及知识点的运用，难点问题的解决
这里我讲述下网页制作过程中运用的主要技术及知识点，难点问题的解决。
1. 网页的整体布局设计
   网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如宣传，以我所编辑的网页为例讲述下，它所提供学校的主页，学校的介绍，学校的图片欣赏，学院的设置以及联系我们等介绍信息。应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对事物（学校）的了解，促成他的认可，加入。
2. 网页设计中色彩的运用
   色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的VI进行色彩运用。在色彩的运用过程中，还应注意的一个问题是：由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。在设计中要考虑众多因素。在我的网页设计中了绿色为主，衬托出绿色生机勃勃的校园。
3. 网页形式与内容相统一
   要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内
4.作品制作完成后的总结与感受
      总体来说，通过今次的对网页设计的学习，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。也希望老师在今后的日子里多指导。网页设计还有更多的技巧，有待于我们去挖掘和研究。由于平时课程比较繁忙，学习时间比较少，对于网页设计软件的强大功能运用得还不够。不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。
5.谈谈你对HTML5、CSS3、JavaScript等web前端知识的认识
      HTML5:万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改,网页前端的标准书写；越来越多的行业巨头正不断向HTML5示好。除苹果、微软、黑莓之外，谷歌的Youtube已部分使用HTML5；Chrome浏览器宣布全面支持HTML5；Facebook则不遗余力地为HTML5进行着病毒式传播。一切正如正益无线总裁王国春所说：“HTML5代表了移动互联网发展的趋势，总有一天它将成为主流技术。
    CSS即层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
    JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
6.学完本门课程后你对任课教师的意见和建议（不少于300字）
   我之前也休了一门类似课程，就是android开发与应用，再者就是我是电子信息工程的学生，硬件编程以及搭建是我们主要的课程之一，我学过51单片机，并且做了大量的51单片机的外置扩展。我很清楚我最大的感受就是理论不用于实践终究是理论，止于理论的学习，将来是没多少成绩的，即使有前途发展的话也必将是少了更为之锦上添花的一笔。当然也深刻认识了一点，那就是我们所学的知识虽说是很基础很根本的，但没有根基怎么能建好别墅呢?所以说基础知识是很重要的，我们在学习过程中不能小看而去忽略它，它是一笔财富，能引导我们看得更远飞得更高。过这次设计，我发现一个很普遍的问题：我们往往是眼高手低，学习这些知识时觉得它就是小菜一桩，但现在真的验证了“看花容易绣花难” 这句话，当我们着手实践时就不像我们想象中的那么简单了，每一个细节都需要注意，稍有不慎页面就在预览中变了样，因此更需要我们细心和耐心地去完成，也就两个字概括——认真，只有认真对待才会从骨子里学到东西，才学到心里去了。
    最后，我想对赵老师说，感谢你诲人不倦的教导让我又学到了一门新的知识，网页开发设计是一门非常有意思的课程，我会继续学下去，我会经常看一些好的视频教程进行自学，就像此次设计中我用到的CSS3网页技术应用就是自己从网络视频中学到的。尽管网页开发技术应用和我们专业没多大的挂钩，但兴趣才是最好的老师，所以我会继续下去的，就像之前修的安卓设计与开发一样。最后我想对您说的是您是一位很令人喜爱的一位老师，看得出大家都很喜欢你。
    我对您的建议是希望老师可以不辞辛苦的将自己的课程录制几集视频，每上完一节课将该视频课程发给同学们，让同学下去可以自学。因为对于这样的课程想在短短的四周学习完，对于同学们是很难的，课上老师也讲的比较快，这样的话同学很快会失去对这门课程的兴趣。而有了每节课的视频就不一样了。这是我在实验室时，我们的老师的方法，效果很不错。
7.学生诚信承诺书

8.教师成绩评定（任课教师填写）

第二篇：JavaScript_——DOM总结

DOM 文档对象模型 Document Object Model

JavaScript将浏览器及网页文档、HTML元素都使用相应的对象表示

如：window、document、body、forms

这些对象与对象的层次关系称为DOM

DHTML (Dynamic HTML 动态HTML)

HTML+JavaScript+CSS+DOM的结合使用

BOM 浏览器对象模型称之为DHTML

JavaScriptDOM总结

浏览器对象

window对象

表示浏览器窗口对其属性和方法的引用可以省略window.

window对象方法

alert()方法

显示包含由应用程序自定义消息的对话框

confirm()方法返回true false

显示一个确认对话框，

prompt()方法

显示一个提示对话框其中带有一条消息和一个输入框

确定返回文本框的值取消返回null

close()方法关闭指定的窗口 open()方法打开一个WEB浏览器窗口

window.location.href="URL" 当前窗口打开新窗口覆盖当前窗口 window.open（”打开窗口的url”，”窗口名”，”窗口特征”）

window.open("about:blank"); //open()最简单使用

window.open("url","windowName","width=100 height=100 status=yes menubar=no toolbar=no resizable=no location=yes scrollbars=yes"); height：窗口高度；

width：窗口宽度； top：窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； toolbar：是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable：是否允许改变窗口大小，yes或1为允许 location：是否显示地址栏，yes或1为允许 status：是否显示状态栏内的信息，yes或1为允许

定时器

轮询

Window. setTimeout(函数名，指定时间毫秒数) 延时执行某个函数执行一次 clearTimeout(定时器对象名称) 取消执行定时器

setInterval(函数名称，时间毫秒数) 定时执行指定的函数间隔为多少毫秒数 clearInterval (定时器对象名称) 取消定时器

定时器示例:

//setTimeout(函数名，指定时间毫秒数) 延时执行某个函数执行一次 //clearTimeout(定时器对象名称)

var start;

function showName(){

document.all["myname"].style.display="block"; start=setTimeout("hideName()",300);

}

function hideName(){

document.all["myname"].style.display="none"; start=setTimeout("showName()",300);

}

function stopTime(){

if (start != null) {

clearTimeout(start);

start=null;

document.all.btn.value="开始闪烁"

}

else

{

start = setTimeout("showName()", 300);

document.all.btn.value="停止闪烁"

}

</script>

</head>

<h2>Hello<font id="myname" color="red" style="display:none">肖总</font></h2> </body>

//setInterval(函数名称，时间毫秒数) 定时执行指定的函数间隔为多少毫秒数 //clearInterval (定时器名称) 取消定时器

var num=0;

var myTimer;

function show(){

document.all.myNum.innerHTML=num++;

}

function testTimer(){

if(myTimer!=null ) {

clearInterval(myTimer);

num=0;

myTimer=null;

document.all.btn.value="开始计时";

}else{

myTimer=setInterval(show,100);

document.all.btn.value="停止计时";

}

</script>

</head>

<body>

</html>

网页对话框

模式对话框和无模式对话框

window.showModalDialog("URL",传递变量名，"窗口特征")

建议传递window对象 />

window.showModelessDialog("URL",传递变量名，"窗口特征") 子窗口访问父窗口数据使用 dialogArguments对象返回到父窗口的值使用 returnValue

window对象的子对象属性：

parent对象代表对象层次中的父窗口 parent对象仅仅是对子窗口有意义 self 对象代表对当前窗口或框架的引用

top 对象代表最顶层的窗口

opener对象代表创建当前窗口的源窗口用于确定open方法打开窗口的源窗口 location 对象代表特定窗口的URL信息

location.replace(url) 刷新不后退

location.href="url" 加载可后退 window.location.reload();

history对象用于存储客户端最近访问过的网址清单

onClick="javascript:top.mymain.history.forward();"> =history.go(1) onClick="javascript:top.mymain.history.back(1);" =history.go(-1) history.go() 刷新表单不提交

history.forward() 指向浏览器历史列表中的下一个URL，相当于点击浏览器的“前进”按钮

history.back() 指向浏览器历史列表中的上一个URL，相当于点击浏览器的“后退”按钮

window.screen 代表浏览器屏幕设置浏览器屏幕

var h=screen.Height; //屏幕高度

var w=screen.Width; //屏幕宽度

window对象属性：

window.status 代表浏览器状态栏设置状态栏标题

window.closed 窗口是否关闭 window.status="清华IT";

window的事件 <html>

<head>

alert("开始加载网页....\n ---请注意网页的加载顺序---");

</script>

</head>

<!-- window的专有事件: onload 在浏览器完成对象的装载后触发事件

onunload 在对象卸载前立即触发事件

onbeforeunload 在页面将要被卸载前触发事件

window对象的事件处理通过body标签的事件属性来设置的

-->

<body onload="alert('html文档加载完毕')"

onbeforeunload="window.event.returnValue='******你确定关闭本窗口******'" onunload="alert('拜拜')">

<h2>注意网页的加载顺序哦!!!</h2>

</body>

</html>

alert("加载写在最下面的JavaScript脚本");

</script>

document对象代表给浏览器窗口中的 HTML 文档 document的属性:

document.bgColor="green";

document.fgColor="red"; //文本前景色

document.vlinkColor="0x00ff00"; //已访问过的链接文本颜色 document.linkColor="gray"; //链接文本颜色 }

function showURL(){

alert(document.URL); //当前文档Unicode编码的 URL地址 }

</script>

</body>

document的方法 document.write()

document.writeln()

document.close()

<body>

<h2>开始的内容</h2>

document.write("这是document对象写入的内容<br>"); var str = "world";

document.write("哈楼 ", str, " javascript ", "<br>"); document.writeln(mystr = "Hello ", " World", "<br>"); document.writeln(mystr)

var a = "帅哥";

document.write(newStr = (a == "美女") ? "东方不败" : "西门吹雪");

document.write("<br>");

function changeDoc(){

document.writeln("以下是更新后的文档内容<br>");

document.writeln('<script language="javascript">');

document.writeln('function changeDoc()');

document.writeln('{');

document.writeln('document.writeln("hello ");');

document.writeln('document.writeln("world ");');

document.writeln('}');

document.writeln('</scr'+'ipt>');//注意这里写法

document.writeln('<input type="button" value="测试document对象" onclick="changeDoc();">');

document.close(); //关闭文档输出

}

</script>

</body>

document集合属性: document.forms //返回文档中的表单数组

document.anchors //获取所有带有 name 和/或 id 属性的 a 对象的集合数组

document.images //返回文档中的image的数组

document.links //获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合数组

document.all 返回对象所包含的元素集合的引用

window.status = "清华IT"; //设置状态栏文本

document.title = "演示";

function show(){

alert("文档标题：" + document.title);

alert("所有指定了href属性的对象集合数组长度:" + document.links.length);

alert("所有带有 name或 id 属性的 a对象的集合数组长度：" +

document.anchors.length);

alert(document.links[1].href);

alert(document.all["an1"].name)

alert(document.forms["frm1"].method);

}

</script>

</head>

<body>

document集合属性演示

</button>

<br/>

<a name="an1" id="a"> TO js_right.html</a>

<br/>

<a name="an2" id="b" href="js_left.html">链接到js_left.html</a> <br/>

<a href="js_right.html">链接到js_right.html</a>

<br/>

</body>

frames 框架对象不能同时设定body

parent.frames 返回父窗口的框架数组： alert(top.frames.length);

alert(parent.frames[0].name)

alert(parent.frames["myleft"].name)

body对象及通用属性

body对象方法:

var myA=document.createElement("a"); //创建一个html元素 myA.href="js_跑马灯.html";

myA.innerText="链接到js_跑马灯.html";

document.body.appendChild(myA); //body对象添加子节点 }

</script>

</head>

<h2>这是一个javascript动态创建的超链接</h2>

</body>

通用属性:

<html>

<head>

<style>

body{ font-size:20px;}

</style>

</head>

<body>

<!—通用属性：

innerText 起始和结束标签内的文本

innerHTML 起始和结束标签内的 HTML

outerText 起始和结束标签内的文本(包含标签本身)

outerHTML 起始和结束标签内的 HTML(包含标签本身)

-->

<p id="p1" onmouseover="this.innerText='<I>innerText</I>'"

onmouseout="this.innerHTML='<I>innerHTML</I>'">

innerText与innerHTML的区别

</p>

<div onmouseover="p2.outerHTML='<p id=p2><I>outerHTML</I></p>'" onmouseout="p2.outerText= '<p id=p2><I>outerText</I></p>'" > 测试outerText与outerHTML区别 <br>

注意当鼠标再次移动到div上时报错原因： p2不存在原来的p2已经被替换成文本 </div>

outerText与outerHTML区别

</p>

</html>

<body>

</div>

</body>

offsetTop 表示对象距顶部高度

offsetLeft 表示对象距左边宽度

offsetWidth 表示对象宽度

offsetHeight 表示对象高度

clientWidth 表示对象不包含滚动条或边框、边距的宽度

clientHeight 表示对象不包含滚动条或边框、边距的高度

clientTop 表示对象不包含滚动条或边框、边距的距父容器顶部高度

clientWidth 表示对象不包含滚动条或边框、边距的距父容器左边宽度

var dirX = 1, dirY = 1;

var xPos = 0, yPos = 0;

window.setInterval(moveIcon, 10);

function moveIcon(){

xPos += 2 * dirX;

yPos += 2 * dirY;

float_icon.style.top = yPos; //top div距顶部高度

float_icon.style.left = xPos; //left div距左边宽度

if (xPos <= 0 || xPos + float_icon.offsetWidth >= document.body.clientWidth) { dirX = -dirX;

}

if (yPos <= 0 || yPos + float_icon.offsetHeight >= document.body.clientHeight) {

dirY = -dirY;

}

</script>

Style对象:

function showItem(){

//获取id为sp的span标记下的img标记数组

var imgs=document.getElementById("sp").getElementsByTagName("img"); var cp=document.getElementById("cp");

var canExpand=true;

if(imgs[0].src.indexOf("minus.gif")!=-1){

canExpand=false;

imgs[0].src="images/plus.gif";

}else{

imgs[0].src="images/minus.gif";

}

if(canExpand){

cp.style.display="block"; //显示

}else{

cp.style.display="none"; //隐藏

}

</script>

</head>

<body>

</span>总公司

<li>上海分公司

<li>北京分公司

<li>常德分公司

</ul>

</body>

w3c DOM

关于节点的操作

引用结点

document.getElementById("idName");

document.getElementsByTagName("tagName"); 返回数组 document.getElementsByName("元素名称");

引用子结点

elementName.childNodes elementName节点下所有子节点数组 elementName.firstChild

elementName.lastChild

引用父结点

elementName.parentNode elementName节点的父节点

elementName.parentElement elementName节点的父元素(IE)

获取结点信息

node.nodeName node节点的名称

node.nodeType node节点的节点类型 1 element 2 attribute 3 text node.nodeValue node节点的文本内容

属性结点

elementNode.setAttribute(attributeName,attributeValue) 设置节点属性 elementNode.getAttribute(arributeName) 获取节点属性

例子：

<body>

<hr>

</body>

</html>

function changeText(){

var node=document.getElementById("div1");

alert("节点名称:"+node.childNodes[0].nodeName);

alert("节点类型:"+node.childNodes[0].nodeType);

alert("节点的文本内容:"+node.childNodes[1].childNodes[0].nodeValue); node.childNodes[1].childNodes[0].nodeValue="这是改变后的文本";

node.childNodes[1].setAttribute("color","red");//设置节点属性

}

</script>

节点的创建和删除

创建元素节点

document.createElement("div");

创建文本节点

document.creatTextNode("hello");

添加子节点

父节点.appendChild("span"); 插入所有子节点之后返回新节点引用插入子节点

父节点.insertBefore(新节点,当前节点) 返回新节点引用删除子节点

父节点.removeChild(childNode)

例子：

<html>

<head>

function createDOM(){

var mydiv=document.getElementById("div3"); var _img=document.createElement("img");

_img.setAttribute("src","images/fish.gif"); mydiv.appendChild(_img);

var _span=document.createElement("span"); var _hr=document.createElement("<hr>");

var _text=document.createTextNode("hello world");

_span.appendChild(_hr);

_span.appendChild(_text);

insertAt(mydiv,_span,1);

}

function insertAt(currentNode,newNode,index){ //如果父结点无子结点则直接添加

if(!currentNode.hasChildNodes()){

currentNode.appendChild(newNode);

}else{

//否则在指定索引的子节点前添加一个节点

currentNode.insertBefore(newNode,currentNode.childNodes[index]); }

}

</script>

</head>

<body>

</div>

</body>

</html>

DOM操作表格

表格的其他标签：<thead>表头只一个 <tbody>表体可以有多个 <table border="1" width="500">

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

引用单元格

mytable.rows //返回行的集合

mytable.rows(i).cells(j) //返回指定行和列的单元格

mytable.rows(i).cells(j).childNodes[0].value //返回指定行和列的单元格文本创建表格

var mytable=document.createElement("table")

删除行

mytable.deleteRow(i);

添加行

mytable.insertRow(i)

添加单元格

mytableRow.insertCell(i)

删除单元格

mytableRow.deleteCell(i)

删除列

mytable.rows[i].deleteCell(j);

使用单元格

var cb=document.createElement("input")

cb.type="checkbox"

mytable.rows[0].cells[1].appendChild(cb)

mytable.rows[0].cells[0].innerHTML="hello"

例子： <body>

<hr>

姓名: <input type="text" id="myname" size="10" > 单位: <input type="text" id="myunit" size="10"> 年龄: <input type="text" id="myage" size="5">

</body>

</html>

function selectAll(){

var selAll=document.getElementById("selAll"); var check=selAll.checked;

var selIds=document.getElementsByName("selIds"); for(var i=0;i<selIds.length;i++){

selIds[i].checked=check;

}

function addUser(){

var name=document.getElementById("myname").value;

var unit=document.getElementById("myunit").value;

var age=document.getElementById("myage").value;

var user=["",name,unit,age];

var mytb=document.getElementById("mytb");

var len=mytb.rows.length;

if(name!="" && unit!="" && age!=""){

var _tr=mytb.insertRow(len);

var _tb0=_tr.insertCell(0);

_tb0.innerHTML="<input type='checkbox' name='selIds'>"; for(var i=1;i<4;i++){

var _tb=_tr.insertCell(i);

_tb.innerHTML=user[i];

}

function delUser(){

var mytb=document.getElementById("mytb");

for(var i=(mytb.rows.length-1);i>0;i--){

if(mytb.rows(i).cells(0).childNodes[0].checked){ mytb.deleteRow(i);

}

</script>

相关推荐

HTML5+JavaScript节课总结

第二篇：JavaScript_——DOM总结

专栏推荐