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

随机推荐

profile MySQL性能分析工具
分析SQL执行带来的开销是优化SQL的重要手段.在MySQL数据库中,可以通过配置profiling参数来启用SQL剖析.该参数可以在全局和session级别来设置.对于全局级别则作用于整个MySQL ...
CCPC2018-湖南全国邀请赛 G String Transformation
G.String Transformation 题目描述 Bobo has a string S = s1 s2...sn consists of letter a , b and c . He ca ...
Java-Runoob：Java 教程
ylbtech-Java-Runoob:Java 教程 1.返回顶部 1. Java 教程 Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言. Java可运行于 ...
android滚条简单说明
先看一下我自己写的布局,电脑屏幕太小,只截取到了一个radiobutton. 先画一个horizontalScrollView,因为我要做水平滚动,然后我需要水平布局,就添加了一个LinearLayo ...
angular 三大核心函数
1.$watch angular监听由于angular一直在实时监听,所以比react和vue效率要低 $scope.$watch('aModel', function(newValue, o ...
php字符串截取函数，支持中文截取
/** * 基于PHP的 mb_substr,iconv_substr 这两个扩展来截取字符串,中文字符都是按1个字符长度计算: * 该函数仅适用于utf-8编码的中文字符串. * * @param ...
python's seventeenth day for me 面向对象
用函数做一个简单的游戏: def Person(name,sex,hp,ad): self = {'name':name,'sex':sex,'hp':hp,'ad':ad} def attack(d ...
table 1PX 边框
.role_mod_tab{border:1px solid #E8E8E8; width:100%; color:#181818; font-size:14px; cellspacing:0; ce ...
提高ListView的效率
按照普通的写法,如果ListView里面有比较多的东西的话,在加载每一个Item的时候,是非常非常卡的.具体表现就是滚动起来的时候会看见明显的卡顿. 关键还是处理自定义Adapter里面的getVie ...
Net Framework 4.0 和.Net Framework 4.0 Client Profile
Net Framework 4.0 和.Net Framework 4.0 Client Profile区别: .Net Framework 4.0毫无疑问就像是.Net Framework 2.0一 ...