原生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 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
js 处理URL实用技巧
Nov 23 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
基于jquery的分页控件(C#)
2011/01/06 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
js实现抽奖效果
2017/03/27 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
详解python中的线程
2018/02/10 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python检测数据类型的方法总结
2019/05/20 Python
django的model操作汇整详解
2019/07/26 Python
python 如何设置守护进程
2020/10/29 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
土木工程专业自荐信
2013/10/04 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
海南地接欢迎词
2014/01/14 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
python requests模块的使用示例
2021/04/07 Python
MySQL基于索引的压力测试的实现
2021/11/07 MySQL