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



3 4



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 js表格table js表格 jsTABLE javascript表格table javascript表格 javascriptTABLE

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到