版权声明：本文为博主原创文章，转载注明出处。有需要请联系[email protected] https://blog.csdn.net/weixin_42749765/article/details/82689037
<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>
/* 表格样式 */
.table_zl_id_div_a {
position:fixed;
width: 600px;
height: 450px;
}
.table_zl_id_div_b {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
background-color: #66cccc;
font-size: 20px;
}
.table_zl_id_div_c{
width: 600px;
height: 450px;
overflow-y: hidden;
overflow-x: scroll;
}
.table_zl_id_div_c table {
width: 590px;
margin: 5px;
height: 410px;
font-size: 12px;
color: #000;
}
.table_zl_id_div_c table thead {
width: 590px;
display: block;
}
.table_zl_id_div_c table tbody {
height: 380px;
overflow-y: scroll;
overflow-x: hidden;
display: block;
text-align: center;
}
.table_zl_id_div_c table tr th div {
width: 92px;
font-size: 14px;
text-align: center;
}
.table_zl_id_div_c table tr td div {
width: 92px;
text-align: center;
}
.table_zl_id_div_c table tr td {
border: 1px solid #fff;
}
.table_zl_id_div_c table tr th {
border: 1px solid #fff;
}
</style>
<body>
<div class="table_zl_id_div_a" id="zl_tz_nr_id"
style="display: block; top: auto; bottom: 50px; left: 310px;">
<div class="table_zl_id_div_b" id="zl_tz_id">
<span id="table_zl_id_div_b_span">断面总览</span> <span style="float:right;margin-right:10px;"> X </span>
</div>
<div class="table_zl_id_div_c">
<table border="0" cellspacing="0" style="border-collapse: collapse;">
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>
</body>
<script>
//数据替换成自己需要用的数据
var data = [{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"}]
//直接把表头和表内全部载入
var addTableF=function(features){
var HtmlStrPoIntsthead = "";
var HtmlStrPoIntstbody = "";
debugger;
//编写表头
HtmlStrPoIntsthead += '<tr>';
for(var j in features[0]){
//if(foreignWaste.dataAll.notParameter.indexOf(j) == -1){
HtmlStrPoIntsthead += '<th><div>'+ j +'</div></th>';
//}
}
HtmlStrPoIntsthead += '</tr>';
//编写表格
for (i = 0, len = features.length; i < len; i++) {
HtmlStrPoIntstbody += '<tr>';
for(var j in features[i]){
//if(foreignWaste.dataAll.notParameter.indexOf(j) == -1){
HtmlStrPoIntstbody += '<td><div>'+ features[i][j] +'</div></td>';
//}
}
HtmlStrPoIntstbody += '</tr>';
}
$(".table_zl_id_div_c table thead").empty().html(HtmlStrPoIntsthead);
$(".table_zl_id_div_c table tbody").empty().html(HtmlStrPoIntstbody);
}
addTableF(data);
</script>
</html>