原生JS操作网页给p元素添加onclick事件及表格隔行变色
2023-06-13 09:15:13 时间
1.给网页中的所有p元素添加onclick事件:
复制代码代码如下:
<%@pagecontentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<html>
<head>
<title>Inserttitlehere</title>
<!--<scriptsrc="jQuery/jquery-1.10.2.js"></script>-->
<scripttype="text/javascript">
window.onload=function(){
varitems=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.使一个特定的表格隔行变色:
<%@pagecontentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<html>
<head>
<title>Inserttitlehere</title>
<!--<scriptsrc="jQuery/jquery-1.10.2.js"></script>-->
<scripttype="text/javascript">
window.onload=function(){
varitem=document.getElementById("tb");
vartbody=item.getElementsByTagName("tbody")[0];
vartrs=tbody.getElementsByTagName("tr");
for(vari=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="green";
}
}
}
</script>
</head>
<body>
<tableid="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事件委托如何理解
- 手把手教你发布兼容TS的JS库到npmjs上
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- Uniapp、Html5plus、Native.js开发记录
- js如何实现随机数切换
- 用js实现的一个Flash滚动轮换显示图片代码生成器
- js验证符合用户体验的网页表单特效
- 兼容IE与firefox火狐的回车事件(js与jquery)
- 一些主流JS框架中DOMReady事件的实现小结
- JS控件事件小结
- js之onload事件的一点使用心得
- js在输入框屏蔽按键,只能键入数字的示例代码
- js对象转json数组的简单实现案例
- js生成动态表格并为每个单元格添加单击事件的方法
- JS、CSS以及img对DOMContentLoaded事件的影响
- asp.net后台如何动态添加JS文件和css文件的引用