原生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 面向对象编程  function是方法(函数)
Sep 17 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
用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
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
JS location几个方法小姐
2008/07/09 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
python爬取NUS-WIDE数据库图片
2016/10/05 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
公司股权转让协议书
2014/04/12 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
关于感谢信的范文
2015/01/23 职场文书
开除员工通知
2015/04/22 职场文书
呐喊读书笔记
2015/06/30 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
分析Java中Map的遍历性能问题
2021/06/26 Java/Android