原生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 相关文章推荐
JS setCapture 区域外事件捕捉
Mar 18 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
用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 数组的指针操作实现代码
2011/02/08 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
JS交换变量的方法
2015/01/21 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
javascript验证身份证号
2015/03/03 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
简单了解python的内存管理机制
2019/07/08 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Python实现疫情地图可视化
2021/02/05 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
工程售后服务方案
2014/06/08 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
写给领导的感谢信
2015/01/22 职场文书
北京天坛导游词
2015/02/12 职场文书
2015感人爱情寄语
2015/02/26 职场文书
python入门之算法学习
2021/04/22 Python