JavaScript-表格隔行换色·鼠标上移换色·合并显示

HTML

<table id="tab1" border="1" width="800" align="center" ><tr><td colspan="5"><input type="button" value="添加"/> <input type="button" value="删除"></td></tr><tr style="background-color: #999999;"><th><input type="checkbox"></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table>

隔行换色

<script>//页面加载window.onload = function(){//获得所有的trvar allTr = document.getElementsByTagName("tr");for(var i = 2 ; i < allTr.length ; i++){//判断i 是偶数还是奇数if(i%2==1){//获得每一行修改颜色allTr[i].style.backgroundColor="pink";}}}
</script>

鼠标上移换色

<script>//1.页面加载window.onload = function(){//2.获得所有的trvar allTr = document.getElementsByTagName("tr");//3.遍历for(var i = 0 ; i < allTr.length ; i++){//移上事件allTr[i].onmouseover = function(){/*** 执行时机问题:*   window.onload 页面加载完马上执行*    window.onload 里面的代码 只要onload加载 代码执行完毕*  for onload的执行的同时 for也执行*    当for循环执行完毕 i =  6**    函数执行时机 调用的时候执行*///调用的时候执行 i 已经变成了6//循环走完 i是固定值 所有不能使用i//allTr[i].style.backgroundColor = "pink";//this表示当前对象this.style.backgroundColor = "pink";//运行时会切换对象}//移出事件allTr[i].onmouseout = function(){this.style.backgroundColor="#fff";}}}</script>

合并

<script>var bgColor;//页面加载window.onload = function(){//获得所有的trvar allTr = document.getElementsByTagName("tr");for(var i = 2 ; i < allTr.length ; i++){//判断i 是偶数还是奇数if(i%2==1){//获得每一行修改颜色allTr[i].style.backgroundColor="pink";}//鼠标移上换色allTr[i].onmouseover = function(){//获得原来的颜色 记录bgColor = this.style.backgroundColor;//换色this.style.backgroundColor="#997B4B";}allTr[i].onmouseout = function(){//赋值原来的颜色this.style.backgroundColor=bgColor;}}}</script>

JavaScript-表格隔行换色·鼠标上移换色·合并显示相关推荐

php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
JavaScript|表格隔行变色(可作模板copy)
本博文源于js基础,主要实现表格的隔行变色. 题目再现想让表格产生隔行变色的效果. 解题思路若手动给所有的奇数行或者偶数行设置某个类名,则显地太麻烦.使用js可以简化这种重复工作. 测试效果附上 ...
【LaTeX】表格调整行高、列宽、合并显示等操作
常规表格: 如上图所示,表格内容都太贴了,看着难受! 1. 样式一: 这样就舒服多了!!! 上述表格的操作: (1)调整行高: \usepackage{array} % 需要该宏包 \renewcom ...
【JavaWeb】TableDemo 表格隔行显色+鼠标悬停高亮显示
[普通表格-非隔行显色] approach1 <script type="text/javascript">window.onload = function () {/ ...
Javascript知识【案例：表格隔行换色】
目录 1,案例1:表格隔行换色 2,案例2:鼠标移入粉色,移出原色[基础+] 2.1:需求说明 2.2:前置知识:鼠标移入移出事件 2.3:前置拓展知识:this关键字 2.4:分析&实现 1 ...
elementui表格隔行换色
关于elementui的表格隔行换色,我呢也是找了很多博客,但是都是死值,对于我这种后端的程序员还是怎么都看不顺眼的,对于隔行换色,应该也不算难点吧,但是让我绞尽脑汁,属于在学校的一个要求,自己写下来 ...
使用css选择器实现表格隔行换色
使用css选择器实现表格隔行换色 <style>*{margin: 0;padding: 0;}body{padding: 200px;box-sizing: border-box;}ta ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head><meta http-equiv="content-type" content= ...

JavaScript-表格隔行换色·鼠标上移换色·合并显示

JavaScript-表格隔行换色·鼠标上移换色·合并显示相关推荐

最新文章

热门文章