原生JS操作網(wǎng)頁(yè)給p元素添加onclick事件及表格隔行變色

更新時(shí)間：2013年12月01日 17:08:06 作者：

原生JS操作網(wǎng)頁(yè),給網(wǎng)頁(yè)中的所有p元素添加onclick事件，使一個(gè)特定的表格隔行變色等等，感興趣的朋友可以參考下

1. 給網(wǎng)頁(yè)中的所有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>測(cè)試段落一...</p> 
<p>測(cè)試段落二...</p> 
<p>測(cè)試段落三...</p> 
</body> 
</html> 

2. 使一個(gè)特定的表格隔行變色：

復(fù)制代碼代碼如下:

 
<%@ 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> 

您可能感興趣的文章:

相關(guān)文章

js將json格式的對(duì)象拼接成復(fù)雜的url參數(shù)方法
下面小編就為大家?guī)?lái)一篇js將json格式的對(duì)象拼接成復(fù)雜的url參數(shù)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
12306 刷票腳本及穩(wěn)固刷票腳本（防掛）
這篇文章主要介紹了12306 刷票腳本及穩(wěn)固刷票腳本的相關(guān)資料,刷票軟件很多，用來(lái)刷票的軟件經(jīng)常會(huì)出現(xiàn)崩潰，而不能繼續(xù)刷票，需要的朋友可以參考下
2017-01-01
pdfmake生成pdf的使用方法
本文介紹了如何使用pdfmake第三方庫(kù)在項(xiàng)目中根據(jù)模板生成PDF文件,文中還提到了常用的配置,如頁(yè)眉和頁(yè)腳效果,對(duì)pdfmake pdf使用方法感興趣的朋友一起看看吧
2024-09-09
小程序?qū)崿F(xiàn)事件綁定的方法步驟
本文主要介紹了小程序?qū)崿F(xiàn)事件綁定的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
深入理解JavaScript中的浮點(diǎn)數(shù)
下面小編就為大家?guī)?lái)一篇深入理解JavaScript中的浮點(diǎn)數(shù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
使用純JS實(shí)現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)
最近做了一個(gè)用js實(shí)現(xiàn)鼠標(biāo)拖拽多選的功能,于是整理了一下思路,寫(xiě)了一個(gè)小demo,下面這篇文章主要給大家介紹了關(guān)于如何使用純JS實(shí)現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)的相關(guān)資料,需要的朋友可以參考下
2022-05-05
List Information About the Binary Files Used by an Applicati
List Information About the Binary Files Used by an Application...
2007-06-06
JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁(yè)效果)
這篇文章主要介紹了JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁(yè)效果) 的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友一起看看吧
2016-05-05
如何在JavaScript中使用localStorage詳情
這篇文章主要介紹了如何在JavaScript中使用localStorage，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
uni-app和web-view頁(yè)面相互傳參方法實(shí)例
web-view是一個(gè)web瀏覽器組件,可以用來(lái)承載網(wǎng)頁(yè)的容器,會(huì)自動(dòng)鋪滿整個(gè)頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于uni-app和web-view頁(yè)面相互傳參的相關(guān)資料,需要的朋友可以參考下
2023-06-06