原生JS操作网页给p元素添加onclick事件及表格隔行变色_Javascript教程-查字典教程网
原生JS操作网页给p元素添加onclick事件及表格隔行变色
原生JS操作网页给p元素添加onclick事件及表格隔行变色
发布时间:2017-01-14 来源:查字典编辑
摘要:1.给网页中的所有p元素添加onclick事件:复制代码代码如下:Inserttitleherewindow.onload=function...

1. 给网页中的所有p元素添加onclick事件:

复制代码 代码如下:

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>

<head>

<title>Insert title here</title>

<>

<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 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教程学习
    热门Javascript教程学习
    编程开发子分类