介绍
- 1.js拼接table
- 2.把table 写入body or 某个div
- 3.设置自适应
- 4.css更改
- 5.js样式更改
- 6.ok
样式
代码
<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:1px solid #000; width:200px; }
/* width border */
table thead tr th{border:1px solid #000; width:200px; }
</style>
<body>
</body>
<script>
//数据替换成自己需要用的数据
var data = [{ "s4": "ss", "s5": "ss", "s6": "ss" },{ "s4": "ss", "s5": "ss", "s6": "ss" }]
//直接把表头和表内全部载入
var addTableF = function (features) {
var hthead = "";
var htbody = "";
var num = 0;
hthead += '<tr>';//编写表头
for (var j in features[0]) {
hthead += '<th><div class="st'+(++num)+'">' + j + '</div></th>';
}
hthead += '</tr>';
for (i = 0, len = features.length; i < len; i++) {//编写表格
htbody += '<tr>';
num=0;
for (var j in features[i]) {
htbody += '<td><div class="st'+(++num)+'">' + features[i][j] + '</div></td>';
}
htbody += '</tr>';
}
//表格去除空隙
var htable = '<table border="0" cellpadding="0" cellspacing="0"> '
+'<thead></thead>'
+'<tbody></tbody>'
+'</table>';
$("body").empty().html(htable);//添加表格
$("table thead").empty().html(hthead);//添加内容
$("table tbody").empty().html(htbody);
$(".st1").css("width",(600/4*1.0)+"px");
$(".st2").css("width",(600/4*0.3)+"px");
$(".st3").css("width",(600/4*1.8)+"px");
}
addTableF(data);
</script>
</html>
ok
持续更新