原生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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
vue2里面ref的具体使用方法
Oct 27 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 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中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
JS中的phototype详解
2017/02/04 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
Vue不能观察到数组length的变化
2018/06/08 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python中%r和%s的详解及区别
2017/03/16 Python
浅谈python中的占位符
2017/11/09 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
python 两种方法删除空文件夹
2020/09/29 Python
python mock测试的示例
2020/10/19 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
无犯罪记录证明范本
2014/09/15 职场文书
教师党员个人整改措施
2014/10/27 职场文书
安全第一课观后感
2015/06/18 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
初一数学教学反思
2016/02/17 职场文书
python关于集合的知识案例详解
2021/05/30 Python