HTML表格多行表头,隔行变色,点击变色的实现

先上效果图

首先多行表头和设置每一个单元格占据的行数跟列数

    <thead>
      <tr>
           <th rowspan="2">设市区</th>
           <th colspan="3">年度总量</th>
           <th colspan="3">累计安排使用数</th>
           <th colspan="3">剩余数</th>
           <th colspan="3">累计使用比例</th>
       </tr>

    <tr>
        <th >新增建设用地</th>
        <th >农用地</th>
        <th >其中耕地</th>
        <th >新增建设用地</th>
        <th >农用地</th>
        <th >其中耕地</th>
        <th >新增建设用地</th>
        <th >农用地</th>
        <th >其中耕地</th>
        <th >新增建设用地</th>
        <th >农用地</th>
        <th >其中耕地</th>
    </tr>
    </thead>

隔行变色的实现,设置CSS样式,我表格的class为gridtable

table.gridtable tr:nth-child(even){background:#E5F3DC;}

even为偶数行变色,odd为奇数行变色

单击变色的实现:

    //<tbody class="tableBody" >这是表身的样式
//js实现单击变色
$(document).ready(function(){
        var dtSelector = ".tablebody";  
        var tbList = $(dtSelector);  
        $("tbody tr").click(function () {

             tbList.each(function() {  
                    var self = this;  
                    // 选择行变色  
                    $("tr", $(self)).click(function (){  
                        var trThis = this;  

                        $(self).find(".selected").removeClass('selected');  

                        $(trThis).addClass('selected');  
                    });  
                });  

        });
    });

selected为CSS样式,我设置的是单击后字体变色,也可设为背景变色

    .selected{
         color:red;
        }