Native JS web pages add onclick events to p elements and interlaced table color changes

2020-03-30 00:38:57
OfStack

1. Add an onclick event to all p elements in the page:

 
<%@ 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(" Click the success ..."); 
} 
} 
} 
</script> 
</head> 
<body> 
<p> Test paragraph 1 ...</p> 
<p> Test paragraph 2 ...</p> 
<p> Test paragraph 3 ...</p> 
</body> 
</html>

2. Make a particular table alternate:

 
<%@ 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> The first line </td></tr> 
<tr><td> The second line </td></tr> 
<tr><td> The third line </td></tr> 
<tr><td> In the fourth row </td></tr> 
<tr><td> The fifth row </td></tr> 
<tr><td> The sixth line </td></tr> 
</tbody> 
</table> 
</body> 
</html>

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201312/201312011706131.gif? 201311117633 ">