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采用了大家常见的小游 ...

随机推荐

saas服务提供商
这段时间接触了不少行业的东西,这里谈几点肤浅的看法.从市场行情上讲,SaaS风口还在,不过热度明显向大数据.物联网.人工智能.区块链等转移. 做得比较好的有这些SaaS提供商,每个领域的都有那么几家的 ...
cowboy的例子
大体参考的这里,非常感谢他的例子开发的时候先下载好cowboy的库,放到~/.erlang里面 code:add_pathz("/Users/mmc/erlang/3rd_libs/cow ...
Linux 配置静态Ip地址
注:所有红色字体标注均为 Linux 的操作命令 ! 1, 使用root账户登录系统 2, 可以先使用 ifconfig : 查看网卡信息 eth0 为默认的第一个网卡 , 如果有第二个就会显示 ...
Effective java笔记3--类和接口1
一.使类和成员的可访问能力最小化要想区别一个设计良好的模块与一个设计不好的模块,最重要的因素是,这个模块对于外部的其他模块而言,是否隐藏了内部的数据和其他的实现细节.一个设计良好的模块会隐藏所有的实 ...
Dynamics CRM 2011 Web Service
Data Services: SOAP Endpoint REST Endpoint Capabilities Assign Records Retrieve Metadata Execute M ...
十分钟学会Fiddler
一.Fiddler介绍 Fiddler是一个http抓包改包工具,fiddle英文中有“欺骗.伪造”之意,与wireshark相比它更轻量级,上手简单,因为只能抓http和https数据包,所以在针对 ...
Java微信公众平台开发(四)--回复消息的分类及实体的创建
转自:http://www.cuiyongzhi.com/post/42.html 前面有说道对接收到微信服务器消息后对消息的分类,当时主要分为普通消息和事件消息,这里我们要讲述的是我们在给用户回复的 ...
Java微信公众平台开发(二)--微信服务器post消息体的接收
转自: http://www.cuiyongzhi.com/post/39.html 在上一篇的文章中我们详细讲述了如何将我们的应用服务器和微信腾讯服务器之间的对接操作,最后接入成功,不知道你有没有发 ...
C语言运算符优先级和口诀 (转)
一共有十五个优先级: 1 () [] . -> 2 ! ~ -(负号) ++ -- &(取变量地址)* (type)(强制类型) sizeof 3 ...
spring集成Redis（单机、集群）
一.单机redis配置 1. 配置redis连接池 <bean id="jedisPoolConfig" class="redis.clients.jedis.Je ...