jquery js html 完全用jqeruy 拼接处一个 table 和内容方便使用的时候直接调用不用写html加宽度自适应-CFANZ编程社区

jquery js html 完全用jqeruy 拼接处一个 table 和内容方便使用的时候直接调用不用写html加宽度自适应

介绍

1.js拼接table
2.把table 写入body or 某个div
3.设置自适应
4.css更改
5.js样式更改
6.ok

样式

jquery js html 完全用jqeruy 拼接处一个 table 和内容方便使用的时候直接调用不用写html加宽度自适应_html

代码

<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>