原生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实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
javascript实现轮显新闻标题链接
Aug 13 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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 preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
超级强大的表单验证
2006/06/26 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python字符串格式化方式解析
2019/10/19 Python
使用python计算三角形的斜边例子
2020/04/15 Python
结束运行python的方法
2020/06/16 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
环保倡议书100字
2014/05/15 职场文书
数学教研活动总结
2014/07/02 职场文书
公司授权委托书范文
2014/09/21 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
任命通知范文
2015/04/21 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
老人节主持词
2015/07/04 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python