原生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 相关文章推荐
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 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 Ubb代码编辑器函数代码
2012/07/05 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
Python实现简单的四则运算计算器
2016/11/02 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
Windows和Linux动态库应用异同
2016/04/17 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
烹饪自我鉴定
2014/03/01 职场文书
厕所文明标语
2014/06/11 职场文书
领导欢迎词范文
2015/01/26 职场文书
天坛导游词
2015/02/02 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
技术员岗位职责范本
2015/04/11 职场文书
教师听课学习心得体会
2016/01/15 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
利用JavaScript写一个简单计算器
2021/11/27 Javascript