原生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>

使用原生js和jQuery实现表格的隔行变色

原生js实现表格隔行变色:利用原生js操作DOM元素 HTML: 1. 使用节点树方式实现表格偶数行变色 ...

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

表格.html 表格操作 全选 编号 编程语言 所属公司 市场份额 诞生日期 操作...
  • a125138
  • a125138
  • 2012年08月16日 19:51
  • 8074

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

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

js实现表格的全选,反选,删除所选行以及隔行变色

Untitled Document                                        table{                     border:#2...

网页里面表格隔行变色代码

  • 2013年11月20日 22:52
  • 957B
  • 下载

jsp制作复合表头并循环产生表格内容,控制隔行变色、鼠标经过改变背景色等操作

http://shop59544428.taobao.com/    pageEncoding="UTF-8"%> 协同单统计管理 ...

js实现隔行变色操作鼠标经过效果

js实现隔行变色操作鼠标经过效果,下面是javascript代码 /**隔行变色**/ function changColor() { var table_Eleme...

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

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

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

代码::: js实现表格隔行变色效果 .top{     background-color:#F93;     color:#30C;} table{     bo...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:原生JS操作网页给p元素添加onclick事件及表格隔行变色
举报原因:
原因补充:

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