原生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 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
thinkphp缓存技术详解
2014/12/09 PHP
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
python 实现汉诺塔游戏
2020/11/28 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
电厂职工自我鉴定
2014/02/20 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
保安公司服务承诺书
2014/05/28 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
车辆年检委托书范本
2014/10/14 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书