原生JS操作網(wǎng)頁給p元素添加onclick事件及表格隔行變色
更新時間：2013年12月01日 17:08:06 作者：
原生JS操作網(wǎng)頁,給網(wǎng)頁中的所有p元素添加onclick事件，使一個特定的表格隔行變色等等，感興趣的朋友可以參考下
1. 給網(wǎng)頁中的所有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>
復(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 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. 使一個特定的表格隔行變色：
復(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格式的對象拼接成復(fù)雜的url參數(shù)方法
下面小編就為大家?guī)硪黄猨s將json格式的對象拼接成復(fù)雜的url參數(shù)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了12306 刷票腳本及穩(wěn)固刷票腳本的相關(guān)資料,刷票軟件很多，用來刷票的軟件經(jīng)常會出現(xiàn)崩潰，而不能繼續(xù)刷票，需要的朋友可以參考下2017-01-01
本文介紹了如何使用pdfmake第三方庫在項目中根據(jù)模板生成PDF文件,文中還提到了常用的配置,如頁眉和頁腳效果,對pdfmake pdf使用方法感興趣的朋友一起看看吧2024-09-09
本文主要介紹了小程序?qū)崿F(xiàn)事件綁定的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2022-04-04
下面小編就為大家?guī)硪黄钊肜斫釰avaScript中的浮點數(shù)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
使用純JS實現(xiàn)checkbox的框選效果(鼠標拖拽多選)
最近做了一個用js實現(xiàn)鼠標拖拽多選的功能,于是整理了一下思路,寫了一個小demo,下面這篇文章主要給大家介紹了關(guān)于如何使用純JS實現(xiàn)checkbox的框選效果(鼠標拖拽多選)的相關(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實現(xiàn)table表格數(shù)據(jù)排序功能(可支持動態(tài)數(shù)據(jù)+分頁效果)
這篇文章主要介紹了JS實現(xiàn)table表格數(shù)據(jù)排序功能(可支持動態(tài)數(shù)據(jù)+分頁效果) 的相關(guān)資料，非常不錯，具有參考借鑒價值，需要的朋友一起看看吧2016-05-05
如何在JavaScript中使用localStorage詳情
這篇文章主要介紹了如何在JavaScript中使用localStorage，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2021-02-02
web-view是一個web瀏覽器組件,可以用來承載網(wǎng)頁的容器,會自動鋪滿整個頁面,下面這篇文章主要給大家介紹了關(guān)于uni-app和web-view頁面相互傳參的相關(guān)資料,需要的朋友可以參考下2023-06-06