原生JS操作网页给p元素添加onclick事件及表格隔行变色

原创 2013年12月02日 10:46:07
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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

javascript表格操作大全:表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。(IE、火狐都兼容)

表格.html 表格操作 全选 编号 编程语言 所属公司 市场份额 诞生日期 操作...

看书《DIV+CSS商业案例与网页布局开发精讲》_表格_隔行变色_随手笔记

这是隔行变色的效果图 制作方法:  (1)利用table的背景色模拟表格边框效果 (  ) (2)制作静态隔行变色:根据行的奇数和偶数定义不同的背景色 (  class分别为tr_1和t...

js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等

代码::: js实现表格隔行变色效果 .top{     background-color:#F93;     color:#30C;} table{     bo...

js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等

如果表格的数据比较多的话,表格颜色很单一看起来很不方便,看到一些网站将每行的颜色隔行改掉,很清晰。 其次如果表格的每行信息很多的话,一个不小心会看跑偏,所以在此为大家提供一个解决的办法,但鼠标放上去...

css美化表格隔行变色显示

在html中常常需要从数据库中获取数据然后显示到浏览器上,显示的方式一般是用表格。单一的表格很容易使人感到枯燥,使用变色效果可以使得表格看起来更加舒适。实现方法如下 /*css*/ /*表格修饰*/...

使用javascript使特定的表格隔行变色

特定的表格隔行变色 (1)根据表格的id获取表格。 (2)在表格内获取元素。 (3)在元素下获取元素。 (4)循环输出获取的元素。 (5)对元素的索引值除以2并取模,...

纯CSS打造隔行变色表格

纯CSS打造隔行变色表格 45 Replies 不知道各位用过Excel没有?在处理大量数据的时候,Excel隔行变色的设计是不是让你舒服很多? 现在网上有很多利用jQuery制作隔行变色表...

基于jQuery的表格特效(隔行、滑动、点击变色)

通过jQuery和CSS实现表格的特效,效果如下: 实现过程: 1.jQuery代码 <!-- $(document).ready(function(){ //demo1: //-隔...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)