结构

        <table id="tb1" border="1" border-collapse="collapse" cellpadding="5" width="400" height="20" cellspacing="0"bordercolor="#99cccc"><thead><tr><td>编号</td><td>作品</td><td>时间</td></tr></thead><tbody id="tb2"><tr><td>1</td><td>回忆三部曲</td><td>1995</td></tr><tr><td>2</td><td>未麻的部屋</td><td>1997</td></tr><tr><td>3</td><td>千年女优</td><td>2001</td></tr><tr><td>4</td><td>妄想代理人</td><td>2004</td></tr><tr><td>5</td><td>红辣椒</td><td>2006</td></tr><tr><td>6</td><td>东京教父</td><td>2003</td></tr></tbody></table>

样式

  .bg {background-color: pink;}

JS

            // 1 获取元素 获取的是tbody里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');for (var i = 0; i < trs.length; i++){trs[i].onmouseover = function (){this.className = 'bg';}trs[i].onmouseout = function (){this.className = '';}}

JavaScript-161:表格全行变色相关推荐

  1. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 构建界面 界面HTML代码 <style>#data,th,td{border: 1px solid #aaaaaa;/*合并边框线*/border ...

  2. php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...

  3. 利用html制作隔行变色表格,javascript实现table表格隔行变色的方法

    本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: table间隔色 function SetTableColor() { var tbl = ...

  4. jQuery练习---- 超简单的表格悬停变色Demo

    <html> <head> <meta http-equiv="Content-Type" content="text/html;chars ...

  5. 鼠标划过表格行变色效果JS

    <!--鼠标滑过表格行变色效果开始--> <script type="text/javascript">         /* 当鼠标移到表格上是,当前一行 ...

  6. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head><meta http-equiv="content-type" content= ...

  7. jquery表格隔行变色

    结果如下图: <!doctype html> <html> <head><meta http-equiv="content-type" c ...

  8. 本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言

    本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...

  9. Python_day21--练习--点亮灯泡、表格隔行变色

    一.点亮灯泡 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...

  10. onmouseover+onmouseout :表格隔行变色

    表格隔行变色 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...

最新文章

  1. SQL 全角半角转换-(摘抄)
  2. java se翻译_(翻译)Java SE 8 Lambda 标准库概览(下)
  3. 为什么不要使用finalize方法
  4. 第四版源码技术导航网自适应
  5. 【7】idea集成docker部署项目
  6. php由哪几部分组成,微型计算机通常是由哪几部分组成?
  7. 防护针对SQL Server数据库的SQL注入攻击
  8. c语言通讯录程序设计个人感言,人生经验 C语言程序设计的感悟
  9. 水声方位估计 - MUSIC算法
  10. VsCode中文乱码问题
  11. Hive的概述、流程和优化
  12. (孔乙己茴香豆的的“茴”字有几种写法)三栏布局两边固定中间自适应
  13. MATLAB编辑AWG波形,使用MATLAB和任意波形发生器创建高性能激励测试系统
  14. 猿辅导python资源_2020猿辅导(小猿搜题)高中辅导全资源合集百度网盘下载
  15. 【新知实验室-TRTC开发】实时音视频之集美真心话
  16. [论文笔记] SSE-PT: Sequential Recommendation Via Personalized Transformed
  17. 在跑SC-LEGO-LOAM时报错[pcl::KdTreeFLANN::setInputCloud] Cannot create a KDTree with an empty input cloude
  18. 微生物学期末复习重点
  19. 假设linux分配给u盘设备名是,习题04_Linux磁盘管理
  20. 嵌入式学习⑩——STM的PWM和DAC

热门文章

  1. 电子设计教程4:稳压管稳压电路
  2. 渗透测试常用工具-amap服务枚举
  3. 凸优化基础知识—凸集(Convex Sets)
  4. 【Android】achartengine的柱状图和饼状图的使用
  5. php 字符串编码方式转换,php字符串编码转换的常用几种方法_PHP教程
  6. Pycharm修改快捷键:后退键和前进键
  7. PAT乙级题解——1093 字符串A+B (20分)
  8. Wsus更新失败错误代码:0x80244022故障排除
  9. 简单写一下未来10年的职业规划
  10. 绿色发展视域下都柳江流域水族传统生态文化研究