introduce

  • Style 1.
  • 2.html
  • 3. Js adds content

 

Style Google Effects

In the code

<html> <head> <title>New Document</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta http-equiv="Content-Type" content="text/html; Charset = utf-8 "> < / head > < script SRC =" https://code.jquery.com/jquery-3.3.1.js "> < / script > < style > body {padding: 100px 0 0 100px; } /* text-align*/ table{text-align:center; } /* width display*/ table thead{ width: 600px; display:block; } /* width height display overflow*/ table tbody{width: 600px; height: 100px; display:block; overflow: auto; } /*width border */ table tbody tr td{border-bottom:1px solid #000; width:200px; } /* width border */ table thead tr th{border-bottom:1px solid #000; width:200px; } </style> <body> <! <table border="0" cellpadding="0" cellpadding="0" >< thead></thead> <tbody></tbody> </table> </body> < script > / / data to replace their var data = [{" s4 ":" ss ", "s5" : "ss", "s6" : "ss"}, {" s4 ":" ss ", "s5" : "ss", "s6" : Var addTableF = function (features) {var hthead = ""; var htbody = ""; hthead += '<tr>'; / / write header for (var j in the features [0]) {hthead + = '< th > < div >' + j + '< / div > < / th >'; } hthead += '</tr>'; for (i = 0, len = features.length; i < len; I++) {// write the table htbody += '<tr>'; for (var j in features[i]) { htbody += '<td><div>' + features[i][j] + '</div></td>'; } htbody += '</tr>'; } $("table thead").empty().html(hthead); $("table tbody").empty().html(htbody); } addTableF(data); </script> </html>Copy the code

 

 

ok

 

 

 

Continuously updated