DOM基础3
隔行变色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var oTab=document.getElementById('table1'); for(var i=0;i<oTab.tBodies[0].rows.length;i++){ if(i%2){
oTab.tBodies[0].rows[i].style.background='';
}
else{
oTab.tBodies[0].rows[i].style.background='#ccc';
}
}
}
</script>
</head>
<body>
<table id="table1" border="1" width="300" align="center">
<thead>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>53</td>
</tr>
<tr>
<td>4</td>
<td>张伟</td>
<td>23</td>
</tr> </tbody>
</table>
</body>
</html>
鼠标移入高亮显示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var oTab=document.getElementById('table1');
var oldColor='';
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
oTab.tBodies[0].rows[i].onmouseover=function(){
oldColor=this.style.background;
this.style.background='green';
}
oTab.tBodies[0].rows[i].onmouseout=function(){
this.style.background=oldColor;
} if(i%2){
oTab.tBodies[0].rows[i].style.background='';
}
else{
oTab.tBodies[0].rows[i].style.background='#ccc';
}
}
}
</script>
</head>
<body>
<table id="table1" border="1" width="300" align="center">
<thead>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>53</td>
</tr>
<tr>
<td>4</td>
<td>张伟</td>
<td>23</td>
</tr> </tbody>
</table>
</body>
</html>
添加一行
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1'); var oBtn=document.getElementById('btn1');
var oName=document.getElementById('name');
var oAge=document.getElementById('age'); oBtn.onclick=function ()
{
var oTr=document.createElement('tr'); var oTd=document.createElement('td');
oTd.innerHTML=oTab.tBodies[0].rows.length+1; //?
oTr.appendChild(oTd); var oTd=document.createElement('td');
oTd.innerHTML=oName.value;
oTr.appendChild(oTd); var oTd=document.createElement('td');
oTd.innerHTML=oAge.value
oTr.appendChild(oTd); oTab.tBodies[0].appendChild(oTr);
};
};
</script>
</head> <body>
姓名：<input id="name" type="text" />
年龄：<input id="age" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
DOM基础3的更多相关文章
- HTML DOM基础知识
HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...
- Javascript DOM基础（一）概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
- js入门——Dom基础
DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...
- 第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- DOM基础（四）
每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...
- DOM基础（二）
在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...
- BOM基础 计时器 定时器 DOM 基础
-------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...
- 第五讲 DOM基础
DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
随机推荐
- Java自定义注解开发
一.背景 最近在自己搞一个项目时,遇到可需要开发自定义注解的需求,对于没有怎么关注这些java新特性的来说,比较尴尬,索性就拿出一些时间,来进行研究下自定义注解开发的步骤以及使用方式.今天在这里记下, ...
- 多线程编程4 - NSOperationQueue
一.简介 一个NSOperation对象可以通过调用start方法来执行任务,默认是同步执行的.也可以将NSOperation添加到一个NSOperationQueue(操作队列)中去执行,而且是异步 ...
- XMPP框架下微信项目总结（5）花名册获取(好友列表)
---->概念 ---->添加花名册 ps:添加花名册,启动: 客户端发送请求到服务器获取好友列表信息,同时在项目中创建数据表,并保存好友列表到数据表中. ---->获取服务器保存好 ...
- 三、jQuery--Ajax基础--Ajax全接触--JSON
JSON基本概念 JSON:JavaScript对象表示法(JavaScript Object Notation) JSON是存储和交换文本信息的语法,类似XML.它采用键值对的方式来组织,易于人们阅 ...
- ASP.NET MVCでResponse Headerのサーバーバージョンをどうやって隠しますか？
本来是发布在客户的Wiki上的,所以用日语写. ---------------------------------------------------------------------------- ...
- Delphi管理多线程之线程局部存储：threadvar
尽管多线程能够解决许多问题,但是同时它又给我们带来了很多的问题.其中主要的问题就是:对全局变量或句柄这样的全局资源如何访问?另外,当必须确保一个线程中的某些事件要在另一个线程中的其他时间之前(或之后) ...
- 【计算机图形学】openGL常用函数
OpenGL常用函数 glAccum 操作累加缓冲区 glAddSwapHintRectWIN 定义一组被 SwapBuffers拷贝的三角形 glAlphaFunc允许设置alpha检测 ...
- [LeetCode] Valid Parentheses
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- SQL SERVER 索引之聚集索引和非聚集索引的描述
索引是与表或视图关联的磁盘上结构,可以加快从表或视图中检索行的速度. 索引包含由表或视图中的一列或多列生成的键. 这些键存储在一个结构(B 树)中,使 SQL Server 可以快速有效地查找与键值关 ...
- .NET Framework 4 与 .NET Framework 4 Client Profile
今天碰到的一个问题和Client Profile相关的.问题是这样的:一个WPF工程,需要引用另外几个.NET的assembly, 在WPF工程中添加了对这几个assembly的引用,并在程序中可以添 ...