原生JS操作网页给p元素添加onclick事件及表格隔行变色


Posted in Javascript onDecember 01, 2013

1. 给网页中的所有p元素添加onclick事件:

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<html> 
<head> 
<title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.js"></script>--> 
<script type="text/javascript"> 
window.onload=function(){ 
var items=document.getElementsByTagName("p"); 
for(i=0;i<items.length;i++){ 
items[i].onclick=function(){ 
alert("单击成功..."); 
} 
} 
} 
</script> 
</head> 
<body> 
<p>测试段落一...</p> 
<p>测试段落二...</p> 
<p>测试段落三...</p> 
</body> 
</html>

2. 使一个特定的表格隔行变色:
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<html> 
<head> 
<title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.js"></script>--> 
<script type="text/javascript"> 
window.onload=function(){ 
var item=document.getElementById("tb"); 
var tbody=item.getElementsByTagName("tbody")[0]; 
var trs=tbody.getElementsByTagName("tr"); 
for(var i=0;i<trs.length;i++){ 
if(i%2==0){ 
trs[i].style.backgroundColor="green"; 
} 
} 
} 
</script> 
</head> 
<body> 
<table id="tb" border="1"> 
<tbody> 
<tr><td>第一行</td></tr> 
<tr><td>第二行</td></tr> 
<tr><td>第三行</td></tr> 
<tr><td>第四行</td></tr> 
<tr><td>第五行</td></tr> 
<tr><td>第六行</td></tr> 
</tbody> 
</table> 
</body> 
</html>

原生JS操作网页给p元素添加onclick事件及表格隔行变色
Javascript 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
用JS实现3D球状标签云示例代码
Dec 01 #Javascript
js arguments,jcallee caller用法总结
Nov 30 #Javascript
js中arguments的用法(实例讲解)
Nov 30 #Javascript
JavaScript中的undefined学习总结
Nov 30 #Javascript
浅析JavaScript中的typeof运算符
Nov 30 #Javascript
浅析JavaScript中的delete运算符
Nov 30 #Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 #Javascript
You might like
浅谈PHP中Stream(流)
2015/06/08 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Javascript与vbscript数据共享
2007/01/09 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python排序算法实例代码
2017/08/10 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python使用requests.session模拟登录
2019/08/09 Python
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
高一家长会邀请函
2014/01/12 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
少先队工作总结2015
2015/05/13 职场文书
初中毕业生感言
2015/07/31 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python