Table布局

最新推荐文章于 2024-04-19 20:39:07 发布

寻找现实扭曲力场

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量881

点赞数

分类专栏： javascript 文章标签： js javascript table

本文链接：https://blog.csdn.net/pearyangyang/article/details/50498142

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

要想达到以下图片中的布局：

下面是相应的html代码，当然里面的Jquery和boostrap是我自己引入的。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>jsTable</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap.css">
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jquery.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>
    	var json = {"0": {"rrvalue": {"CC": 0.8652407470299768,"CT": 1.1161605636753882,"TT": 1.4398471271298607},"rsid": "rs505802","sex": 0},"1": {"rrvalue": {"CC": 0.8655216050171408,"CT": 1.116522870472112,"TT": 1.4403145029090243},"rsid": "rs505802","sex": 1}};
		
		console.log(json);
		//console.log(json["0"]["rrvalue"]["CC"]);
		
		//json 数据的长度
		var count = Object.keys(json).length;
		
		
		$(function(){
			var dom_tbody = $('<tbody></tbody>'); 
		
			var base_dom_tr1 = $('<tr></tr>');
			var base_dom_th1 = $('<th></th><th style=\'text-align: center;\' colspan=\'3\'>rrvalue</th><th></th><th></th>');
			base_dom_tr1.append(base_dom_th1);
			dom_tbody.append(base_dom_tr1);
			
			var base_dom_tr2 = $('<tr></tr>');
			var base_dom_th2 = $('<th>id</th><th>CC</th><th>CT</th><th>TT</th><th>rsid</th><th>sex</th>');
			base_dom_tr2.append(base_dom_th2);
			dom_tbody.append(base_dom_tr2);
			
			
			for(var i=0;i<count;i++){
				var base_dom_tr3 = $('<tr></tr>');
				var base_dom_th3 = $('<th>'+i+'</th><th>'+json[i]["rrvalue"]["CC"]+'</th><th>'+json[i]["rrvalue"]["CT"]+'</th><th>'+json[i]["rrvalue"]["TT"]+'</th><th>'+json[i]["rsid"]+'</th><th>'+json[i]["sex"]+'</th>');
				base_dom_tr3.append(base_dom_th3);
				dom_tbody.append(base_dom_tr3);
			}
			
			
			var dom_table = $('<table class=\'table table-bordered\'></table>').append(dom_tbody); 
			$("#createTable").append(dom_table);
		});
    </script>

  </head>
  <body>
  	<div id="createTable">
    <!--
        <table class="table table-bordered">
          <tr>
            <th></th>
            <th style="text-align: center;" colspan="3">rrvalue</th>
            <th></th>
            <th></th>
          </tr>
          <tr>
            <th>id</th>
            <th>CC</th>
            <th>CT</th>
            <th>TT</th>
            <th>rsid</th>
            <th>sex</th>
          </tr>
           <tr>
            <th>0</th>
            <th>0.8652407470299768</th>
            <th>1.1161605636753882</th>
            <th>1.4398471271298607</th>
            <th>rs505802</th>
            <th>0</th>
          </tr>
        </table>
    -->
    </div>
  </body>
</html>

动态的用JS来构建Table，这里面我们的JSON数据可以是不确定性的。Table标签其实就是几个重要的标签组成的，<tr> 表示表格行，<th>表示表头，<td>一般放数据