原生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 Array Flatten 与递归使用介绍
Oct 30 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
JavaScript实现分页效果
Mar 28 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
angularJs中datatable实现代码
Jun 03 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 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
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
上课迟到检讨书
2014/01/19 职场文书
总结表彰大会主持词
2014/03/26 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
运动会主持人开幕词
2016/03/04 职场文书
Python学习之os包使用教程详解
2022/03/21 Python
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记