1、所用事件详解

2、<thead>,<tbody>标签介绍

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

详细描述

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

3、代码实现

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>表格隔行换色</title>

         <script>

             function changeColor(id,flag){

                 if(flag=="over"){

                     document.getElementById(id).style.backgroundColor="red";

                 }else if(flag=="out"){

                     document.getElementById(id).style.backgroundColor="white";

                 }

             }

         </script>

     </head>

     <body>

         <table border="1" width="500" height="50" align="center">

             <thead>

                 <tr>

                     <th>编号</th>

                     <th>姓名</th>

                     <th>年龄</th>

                 </tr>

             </thead>

             <tbody>

                 <tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">

                     <td>1</td>

                     <td>张三</td>

                     <td>22</td>

                 </tr>

                 <tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">

                     <td>2</td>

                     <td>李四</td>

                     <td>25</td>

                 </tr>

                 <tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">

                     <td>3</td>

                     <td>王五</td>

                     <td>27</td>

                 </tr>

                 <tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">

                     <td>4</td>

                     <td>赵六</td>

                     <td>29</td>

                 </tr>

                 <tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">

                     <td>5</td>

                     <td>田七</td>

                     <td>30</td>

                 </tr>

                 <tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">

                     <td>6</td>

                     <td>汾九</td>

                     <td>20</td>

                 </tr>

             </tbody>

         </table>

     </body>

 </html>

用JS实现表格的高亮显示的更多相关文章

jquery完成带单选按钮的表格行高亮显示
jquery完成带单选按钮的表格行高亮显示上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户 ...
jquery完成带复选框的表格行高亮显示
jquery完成带复选框的表格行高亮显示通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...
JS中表格的全选和删除要注意的问题
在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...
datagrid-detailview.js easyui表格嵌套
datagrid-detailview.js easyui表格嵌套
案例学习总结：原生JS实现表格排序
最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...
JS对表格排序(支持对序号，数字，字母，日期)
JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看可以看这个地址 http://gallery.kissyui.com/KSort ...
如何用js创建表格？
1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var ta ...
（转）用JS实现表格中隔行显示不同颜色
用JS实现表格中隔行显示不同颜色第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? ...
js实现表格配对小游戏
js实现表格配对小游戏一.总结一句话总结: 二.js实现表格配对 1.配对游戏案例说明实例描述: 当用户点击两个相同的图案或字符后配对成功,全部配对成功后游戏获胜案例008采用了大家常见的小游 ...

随机推荐

理解Windows消息循环机制
理解消息循环和整个消息传送机制对Windows编程十分重要.如果对消息处理的整个过程不了解,在windows编程中会遇到很多令人困惑的地方. 什么是消息(Message)每个消息是一个整型数值,如果查 ...
jetty中war包解压路径
这是个很奇怪的问题,如果下载好了jetty直接放入war包运行,项目会被解压到C盘的临时文件夹中.但是如果你在${JETTY_HOME}文件夹,也就是jetty解压后的根目录中新建,注意是新建一个wo ...
java冒泡排序算法例子
总结:运行显示数组下标越界说明,数组长度a.length.表示数组的长度,但索引值是要减一的.勿忘 package com.c2; //冒泡排序 //从小到大的顺序排列 public class MA ...
杂项-公司-百科：华特·迪士尼-un
ylbtech-杂项-公司-百科:华特·迪士尼华特·迪士尼(Walt Disney,全名Walter Elias Disney,又译沃尔特·迪士尼,1901年12月5日—1966年12月15日),出 ...
mysql 无意重启 [Note] /usr/sbin/mysqld: Normal shutdown
情况: 今早发现,昨天下午安装的4台mysql服务器,突然出现,由于在shell窗口 (root@localhost:mysql.sock) [(none)]> 190102 18:12:16 ...
idea完成分支和主干的合并
我们在开发一个项目的时候,我们可能会创建一个分支和一个主干.对于分支而言,我们一般在开发的时候可能会使用,但是在项目上线的时候,我们抽取的项目的地址可能是主干的svn地址,这时我们需要将分支上的svn ...
Zabbix自定义监控网站服务是否能够正常响应
监测tcp连接数文件名: /etc/zabbix/zabbix_agentd.conf.d/count_tcp.conf UserParameter=count.tcp,netstat -s|g ...
python并发之multiprocessing
由于GIL(全局解释锁)的问题,python多线程并不能充分利用多核处理器.如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.multiprocessing可以给每个进程赋 ...
MongoDB在Java下的增删查改
我们总不能一直使用cmd对数据库操作,数据库总是要在程序中使用的.今天来说一下怎么通过Java调用MongoDB. 学习一下最基本也是最常用的增删查改语句,这是使用数据库的基础. 注意事项: 1.要打 ...
docker 启动redis容器
dockerfile FROM registry.cn-hangzhou.aliyuncs.com/xxxholic/redis COPY redis.conf EXPOSE redis.conf p ...