淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery动态生成隔行变色表格

1. Demo下载地址


    jQuery动态生成隔行变色表格下载地址：http://download.csdn.net/detail/lypf19900912/8638743


 2. 效果截图


       实现的效果：将查询的数据转换为json串，通过循环json串动态的加载表格数据以及样式。最终生成下图的表格，其次当鼠标移动到某一行的时候还有颜色的变化。


3. 代码实现

1. table. html

<!DOCTYPE html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
<title>jQuery动态生成隔行变色表格</title>  
<link href="styles.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css" />  
<script language="javascript" type="text/javascript" src="jquery.js"></script>  
<script language="javascript" type="text/javascript" src="dynamictable.js"></script>  
<link href="styles.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css"/>  
</head>  
<body>  
<center>  
<div>  
<h2 id="x">jQuery动态生成隔行变色表格</h2>  
</div>  
  
<table style="border-collapse:collapse;width: 500px;" id="mytable">  
    <thead style="text-align:center">  
    <span style="white-space:pre">    </span><tr>  
        <span style="white-space:pre">    </span><th>编号</th>  
            <th>职务名称</th>  
        </tr>  
    </thead>  
    <tbody></tbody>  
</table>  
<br />  
<hr />  
</center>  
  
</body>  
</html>

2. style.css

{  
    color: #c75f3e;  
}  
  
.mytable {  
    width: 100%;  
    padding: 0;  
    margin: 0;  
    background: #fff;  
}  
  
td {  
    font-size:15px;  
    border-bottom: 1px solid #C1DAD7;  
    padding: 6px 6px 6px 12px;  
    color: #4f6b72;  
    text-align:center;    
}  
.even{  
 background-color:white;  
}  
.odd{  
 background-color:#f5f5f5;  
}  
.selected{  
 background-color:rgb(238, 238, 238);  
}  
.se{  
 background-color:rgb(238, 238, 238);  
}  
.panel-header, .panel-body {  
  border-color: #E9EAEC;  
}

3. dynamictable.js

//页面加载  
$(document).ready(function(){  
    //动态生成table需要加载的json串  
    var data =   
    "[{\"id\":\"001\",\"roleName\": \"管理员\",\"sortId\": 1},"+  
      "{\"id\":\"002\",\"roleName\": \"董事长\",\"sortId\": 2},"+  
      "{\"id\":\"003\",\"roleName\": \"CEO\",\"sortId\": 3},"+  
      "{\"id\":\"004\",\"roleName\": \"总经理\",\"sortId\": 4},"+  
      "{\"id\":\"005\",\"roleName\": \"经理\",\"sortId\": 5},"+  
      "{\"id\":\"006\",\"roleName\": \"一般员工\",\"sortId\": 6}]";    
      
    strJson=eval(data);  
    dynamicTable(strJson);  
});  
      
//动态生成table  
function dynamicTable(strJson){  
    if(strJson == null || strJson.length == 0){  
        var tbBody = ""  
        tbBody += "<tr class='mytr' colspan='3'><td>没有符合条件的数据</td></tr>";  
        $("#mytable").append(tbBody);  
    }else{  
        //清空table中的数据  
         $("table tbody").empty();  
         //设置table的表头  
        for(var i=0; i<strJson.length; i++)    
        {    
            var tbBody = "";  
            //table--隔行变色  
            var trColor;  
            if (i % 2 == 0) {  
                trColor = "even";  
            }else {  
                trColor = "odd";  
            }  
            //table--滑动变色  
             $("tr").mouseover(function (){  
              $(this).addClass("se");   
             }).mouseout(function (){  
              $(this).removeClass("se");  
             });  
            tbBody += "<tr class='" + trColor + "'><td>" + strJson[i].sortId + "</td>" + "<td>" + strJson[i].roleName + "</td></tr>";  
            $("#mytable").append(tbBody);  
        }  
    }  
}

4. 总结

       这个实现起来一点都不难，主要是jQuery+ajax+json。动态生成table的代码在项目中很常用，这样子的项目很多的前台框架比如easyui，bootstrap等都给我们封装的很好，但是有的时候一些显示效果不太符合我们的业务需求，这些时候我们就可以手动的实现这样子的项目。这样做的好处相比较框架来讲，灵活性要好很多。