手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >原生JS操作网页给p元素添加onclick事件及表格隔行变色
原生JS操作网页给p元素添加onclick事件及表格隔行变色
摘要: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>

1

【原生JS操作网页给p元素添加onclick事件及表格隔行变色】相关文章:

对联广告 可关闭

精通JavaScript的this关键字

滚动效果

JavaScript实现列表分页功能特效

JQuery分屏指示器图片轮换效果实例

javascript 动态添加表格行

在JavaScript的正则表达式中使用exec()方法

javascript实现简单的省市区三级联动

js的event详解。

javascript实现Table间隔色以及选择高亮的方法

精品推荐
分类导航