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.掌 ...
随机推荐
- iOS-运行时机制
这里的两篇运行时的文章感觉还不错. 收藏: 初识iOS运行时RunTime | // TODO: http://www.saitjr.com/ios/objc-runtime.html Objecti ...
- October 10th 2016 Week 42nd Monday
What makes life dreary is the want of motive. 没有了目标,生活便黯然无光. Motive and goal, are absolutely indispe ...
- Xcode常用代码块
Xcode的代码片段(Code Snippets)创建自定义的代码片段,当你重用这些代码片段时,会给你带来很大的方便. 常用的: 1.strong:@property (nonatomic,stron ...
- Ionic2 Tutorial
build your first app Now that you have Ionic and its dependencies installed, you can build your firs ...
- codevs 2530大质数
链接:http://codevs.cn/problem/1530/ 解题思路: 这个题最关键的剪枝还是 因子小于平方根,但不是像原来那样用. 逆转思维,与其说判断哪些是质数,不如说判断哪些不是质数,更 ...
- sql server 时间小汇
SQL server DATE函数 (1)getdate 返回当前系统的日期和时间,精确到3毫秒 要求:获得系统的当前时间 语句:SELECT getdate() 执行结果: 注:getutcda ...
- sql server 常用脚本（日常查询所需）
1:查看sql server代理中作业的运行状况的脚本 -- descr : a simple sql script to view sql server jobs run status -- las ...
- C#的事件
using System; using System.Collections; using System.Collections.Generic; using System.IO; namespace ...
- UDP穿透NAT原理解析
转自:http://www.2cto.com/net/201201/116793.html NAT(Network Address Translators),网络地址转换:网络地址转换是在IP地址日益 ...
- web开发的步骤
前端知道是浏览器呈现的部分,相对于前端,后台你可以理解为服务器端专门处理.读取.存储数据库数据的部分. 因为网站是基于B\S架构,即浏览器---服务端架构,就程序来讲,可笼统划分为前端程序和服务器端程 ...