原生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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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中执行系统外部命令
2006/10/09 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
js实现div色块碰撞
2020/01/16 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS