今天，項目中要用到該表格，找了一遍，發現沒有合適的，于是自己動手豐衣足食。

?

最終呈現效果如上圖，

1、左側是表頭的表格數據展現，

2、支持多行，多表頭

3、固定表頭的功能

4、能夠支持標題

5、獲取表格中的數據

6、支持IE/CHROME

7、 表格能夠自適應根據內容行居中

Grid左側固定測試

var test = new LeftHeadGrid({

id: "leftHeadGrid",

width: 800,

title:"danielinbiti",

perUnitWidth:300,

rowHeads:[{

width:"60",

rowname:[{name:"日期"},{name:"數值"}]

}],

columnDatas:[{

width:[1,1],

rows:[[10130501,101011],[2,3]]

}]

});

test.RenderTo("testdiv");

LeftHeadGrid.js

var LeftHeadGrid = function(config) {

this.rowHeads = config.rowHeads != null ? config.rowHeads: [];//name

this.columnDatas = config.columnDatas != null ? config.columnDatas: [];

this.width = config.width != null ? config.width: "";

this.id = config.id != null ? config.id: "TreGrid";

this.perUnitWidth = config.perUnitWidth != null ? config.perUnitWidth: 10;

this.innerWidth = 0;

this.innerLWidth = 0;

this.height = 0;

this.title = config.title != null ? config.title: "";

this.noDataStr = config.noDataStr != null ? config.noDataStr: "no data";

}

LeftHeadGrid.prototype.createGrid = function(){

var totalwidth = 0;

var tableHtml = "

for(var i=0;i

var obj = this.rowHeads[i];

var width = obj.width;

totalwidth = totalwidth + parseInt(width);

var rownameobj = obj.rowname;

for(var j=0;j

var nameobj = rownameobj[j];

if(j==rownameobj.length-1){

tableHtml = tableHtml + "

" + nameobj.name + "";

}else{

tableHtml = tableHtml + "

" + nameobj.name + "";

}

this.height = this.height + 40;

}

}

tableHtml = tableHtml + "

";

var headHtml = "

";

headHtml = headHtml + tableHtml + "

";

this.innerLWidth = totalwidth;

this.innerWidth = this.width-totalwidth-5;

return headHtml;

}

LeftHeadGrid.prototype.RenderTo =function(divId){

//var innerWidth = this.width-100;

var headHtml = this.createGrid();

var html = "

"

+ headHtml

+ "

"

+ "

"

+ "

"

+ "

"

+ "

"

html = "

" + this.title + ""

+ html + "

";

總結

以上是生活随笔為你收集整理的html 表格 左侧表头,左侧是表头的JS表格控件(自写,网上没有的)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。