JavaScript实现table表格背景变色代码实例

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > JavaScript实现table表格背景变色代码实例

如果表格的行数过多的话，可能会影响使用者对于行与行之间的分辨，于是也就容易出现失误，所以现在有比较常见的几种措施可以有效的缓解此问题，第一个就是各行变色，第二个就是鼠标滑过能够实现当前行背景变色效果，下面就是一段这样的实例代码，大家可以借鉴一下，代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
.body_div{
  font-size:12px;
  background-color:#CCCCCC;
}
.tr_odd{
  background-color:orange;
}
.tr_even{
  background-color:aqua;
}
.mouse_color{
  background-color:green;
}
#tab{
  border:1px #FF0000 solid;
  text-align:center;
  width:100%;
  height:100%;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#tab tr:odd").find("td").addClass("tr_odd"); 
  $("#tab tr:even").find("td").addClass("tr_even"); 
  $("#tab tr").mouseover(function(){ 
    $(this).find("td").addClass("mouse_color"); 
  });
  $("#tab tr").mouseout(function(){ 
    $(this).find("td").removeClass("mouse_color"); 
  });
}) 
</script>
</head>
<body>
<body class="html_body">
<div class="body_div">
  <table id="tab">
    <tr style="background:#000000;color:#FFFFFF;font-weight:bolder;">
      <th>工号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>2014010101</td>
      <td>张峰</td>
      <td>56</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2014010102</td>
      <td>李玉</td>
      <td>42</td>
      <td>女</td>
    </tr>
    <tr>
      <td>2014010103</td>
      <td>王珂</td>
      <td>36</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2014010104</td>
      <td>张钰</td>
      <td>31</td>
      <td>女</td>
    </tr>
    <tr>
      <td>2014010105</td>
      <td>朱顾</td>
      <td>44</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2014010106</td>
      <td>胡雨</td>
      <td>35</td>
      <td>女</td>
    </tr>
    <tr>
      <td>2014010107</td>
      <td>刘希</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2014010108</td>
      <td>孙宇</td>
      <td>45</td>
      <td>女</td>
    </tr>
    <tr>
      <td>2014010109</td>
      <td>谷雨</td>
      <td>33</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2014010110</td>
      <td>科宇</td>
      <td>45</td>
      <td>女</td>
    </tr>
  </table>
</div>
</body>
</html>

代码描述：JavaScript实现 table表格背景变色。JavaScript实现table表格背景变色代码实例

下载全部收藏

167 223

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册