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

随机推荐

show-overflow-tooltip 宽度设置
设置样式:不能放在scoped中 <style lang="scss"> .el-tooltip__popper{max-width:80%}</style> ...
erlang的tcp服务器模板
改来改去,最后放github了,贴的也累,蛋疼还有一个tcp批量客户端的,也一起了大概思路是混合模式使用erlang:send_after添加recv的超时处理 send在socket的opt ...
ZipArchive扩展的使用和Guzzle依赖的安装使用
在项目开发的过程中,需要去远程下载录音文件然后保存到自己的项目中,然后再把录音文件压缩打包,最后再下载给用户 1.Guzzle依赖的安装 guzzle官方文档:http://guzzle-cn.re ...
java代码反转toCharAT()的用法
总结:反转注意for循环里面的变化 package clientFrame; //字符串反转 public class we { public static void main(String[] ar ...
PLSQL Developer备份恢复oracle数据
使用PL sql提供的功能可以快速的备份恢复oracle数据. 1 导出存储过程,触发器,序列等所有用户对象.(备份) 在PL/SQL Developer的菜单Tools(工具) => Exp ...
window 下编译cef 内核加入mp3/mp4 支持
下载 depot_tools 解压,加入到环境变量进入cmd(管理员)运行 gclient 获取 python和git,svn,设置python环境变量创建新文件夹 mkdir chromium ...
有一些sql 是必须要做笔记的！！
select CONCAT(unix_timestamp(),"-",id,"-",name) as aa,age from workers; //连接字段 s ...
Screen - BOM对象
Screen 对象 Screen 对象包含有关客户端显示屏幕的信息. 注释:没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象. Screen 对象属性属性描述 availHei ...
Objects & Class
[Objects & Class] 1.定义一个类. 上述代码中,numberOfSides是实例变量,simpleDescription也是实例方法. 2.创建实例,使用实例. 3.init ...
为什么学习python？（知乎大神的回答）
学习PHP 是因为得到一份工作学习Java 是因为他们选修了计算机科学这门课程学习python 是因为爱这门语言,因为寻求美