数据表格的样式

代码

<style type="text/css">
      table{  width:"100%" border:"1" cellspacing:"0" cellpadding:"4" border-collapse:collapse}
      th{backGround-color:#CCCCFF}
      .item1{background-color:#FAF3DC}
      .item2{background-color:#EAEAEA}
</style>
引用Jquery
<script type="text/javascript">
//全选与反选
function checkall(all) {
if (all.checked) {
                $("div").children(":checkbox").attr("checked", true);
            } else {
                $("div").children(":checkbox").attr("checked", false);
            }
        }
        $(function () {
            $("tr:even").addClass("item1"); //奇数行的样式
            $("tr:odd").addClass("item2"); //偶数行的样式
        });
</script>

表格
<table>
<tbody>
<tr>
<th align="left" scope="col"><div><input id="checkAll" type="checkbox" onclick="checkall(this)"/></div>全选</th>
<th align="left" scope="col">编号</th>
<th align="left" scope="col">国别名称</th>
<th align="left" scope="col">图标</th>
<th align="left" scope="col">排序</th>
<th align="left" scope="col">编辑\删除</th>
</tr>

<tr onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#E6E6FA'"                onmouseout="this.style.backgroundColor=currentcolor" >
<td>数据</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td>
.........................
</tr>
</tbody> 
</table>   

 

转载于:https://www.cnblogs.com/kuiyu/archive/2012/02/21/2361523.html