原生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 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
js前端图片加载异常兜底方案
Jun 21 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
介绍几个array库的新函数 php
2006/12/29 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
python插入数据到列表的方法
2015/04/30 Python
Python生成随机密码的方法
2017/06/16 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
python 发送get请求接口详解
2020/11/17 Python
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
学生会干部自荐信
2014/02/04 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
单身证明格式样本
2015/06/15 职场文书
创业计划书之养殖业
2019/10/11 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL