js+jquery根据json数据生成表格 及 表格和按钮CSS代码

CSS样式body {
color:aliceblue;
background: #333;
padding : 4px;
}

.button {
-webkit-user-select: none;
user-select: none;
min-height: 1.5em;
display: inline-block;
padding: 12px 36px;
margin: 40px 5px 5px 0px;
cursor: pointer;
opacity: 0.9;
color: #FFF;
font-size: 1em;
letter-spacing: 1px;
text-shadow: rgba(0,0,0,0.9) 0px 1px 2px;
background: #434343;
border: 1px solid #242424;
border-radius: 1px;
box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}

.button:hover {
-webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}

.button:active {
-webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}

.shine {
display: block;
position: relative;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
padding: 0px 12px;
top: -12px;
left: -24px;
height: 1px;
-webkit-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
-moz-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.button:hover .shine {
left: 24px;
}
.button:active .shine {
opacity: 0;
}
.button.black {
background: #000000;
}
.button.gray {
background: #555;
}
.button.blue {
background: #3a617e;
}
.button.green {
background: #477343;
}
.button.red {
background: #723131;
}
.button.purple {
background: #4b3f5e;
}
.button.orange {
background: #624529;
}
/*表格样式*/
table.hovertable {
margin:10px;
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}

table.hovertable th {
background-color: #c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}

table.hovertable tr {
background-color: #d4e3e5;
}

table.hovertable tr.tg {
background-color: #c3dde0;
}

table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WEB</title>
<script src="JS/jquery-1.11.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="CSS/StyleSheet.css" />
</head>
<body>
<div class="button gray" id="id" onclick="document.getElementById('id').className = 'button black'"><div class="shine"></div>变成黑色</div>
<div class="button blue" onclick="setTable('tb')"><div class="shine"></div>生成表格</div>
<div id="tb"></div>
</body>
</html>
<script src="JS/JavaScript.js"></script>JavaScript.js

var serviceUrl = "http://localhost:54357/Handler.ashx";
//var serviceUrl = "http://localhost:54357/GetMFT";

function setTable(id) {
$.getJSON(serviceUrl, function (json) {
var htmls = ['<table class="hovertable">'];
htmls.push('<tr>')
for (var k in json[0]) htmls.push('<th>' + k + '</th>');
htmls.push('</tr>');
for (var i = 0; i < json.length; i++) {
if (i % 2 == 0) { htmls.push('<tr onmouseover="this.style.backgroundColor=\'#ffff66\';" onmouseout="this.style.backgroundColor=\'#d4e3e5\';">'); }
else { htmls.push('<tr  class="tg" onmouseover="this.style.backgroundColor=\'#ffff66\';" onmouseout="this.style.backgroundColor=\'#c3dde0\';">'); }
for (var k in json[i]) htmls.push('<td>' + json[i][k] + '</td>');
htmls.push('</tr>');
}
htmls.push('</table>');
$('#'+id).html(htmls.join(''))
});
}

界面效果图