原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013-12-02 10:46
916 查看
1. 给网页中的所有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>
代码如下:
<%@ 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）
- js给网页中所有p元素添加onclick事件
- 通过原生JS实现为元素添加事件的方法
- javascript表格操作大全：表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。（IE、火狐都兼容）
- jQuery练习1--给网页中所有的 &lt;p&gt; 元素添加 onclick 事件
- jQuery练习1--给网页中所有的 <p> 元素添加 onclick 事件
- 通过原生JS实现为元素添加事件
- 通过原生JS实现为元素添加事件的方法
- 使用原生js和jQuery实现表格的隔行变色
- JS实现为动态创建的元素添加事件操作示例
- js基础知识示例1----给网页的所有p元素添加onclick元素 fl ch2 28
- javascript表格操作大全：表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。（IE、火狐都兼容）
- js为元素添加onclick事件
- js表格中的DOM操作,隔行变色和添加、删除某一行，搜索数据
- jquery动态添加元素后， 该元素事件失效，可尝试原生 js写法解决
- js实现文本框或文本域在用户输入时（oninput）触发事件，操作元素
- 原生JS根据元素id调用元素事件无效的问题
- c# WebBrowser网页操作-元素获取_事件操作