一行js代码！实现一个简洁表格

周一开学了，回去补考 物流 ，悲催的人生。

 

 废话不多说，直接上代码，嗯，4行了，不过明眼人都能看出来它还是一行吧。。

var myTable=new Table({
    title:'大学四年',
    data:data,
    thead:thead
});

data的数据格式同Ext
 

 
var data=[
	    
		['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],
		['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],
		['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],
		['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉']
	]
var thead=['标题1','标题2','标题3','标题4','标题5','标题6']


 
当然，每次都想一行就创建这样一个表格，需要进行一定封装，代码如下，写的很随意， 没仔细推敲，没注释，也没有任何容错处理，凑合来吧。
很明显模仿的Ext的表格。
 
 
myExt={};
myExt.util={};
myExt.util.css={};
myExt.util.css.applyCss=function(src){
	    var link=document.createElement('link')
		link.rel="stylesheet";
		link.type='text/css';
		link.href=src;
		document.getElementsByTagName('head')[0].appendChild(link);
};
	
function Table(config){
	    this.title=config.title;
		this.data=config.data;
		this.thead=config.thead;
		this.show();
}
Table.prototype.show=function(){
    var table=document.createElement('table');
    var tbody=document.createElement('tbody');
    var cap=document.createElement('caption');
    cap.appendChild(document.createTextNode(this.title));
    table.appendChild(cap);
    table.appendChild(tbody);
    var thead=document.createElement('tr');
    tbody.appendChild(thead);
    for(var m=0;this.thead[m];m++){
    var th=document.createElement('th');
    th.appendChild(document.createTextNode(this.thead[m]));
    thead.appendChild(th);
}
		var rows=this.data.length;
		var cols=this.data[0].length;
		for(var i=0;i<rows;i++){   
				var tr=document.createElement('tr');
			    tbody.appendChild(tr);
			for(var j=0;j<cols;j++){
				if(j){
					var td=document.createElement('td');
				    td.appendChild(document.createTextNode(this.data[i][j]));
			        tr.appendChild(td);
				}else{
				    var td=document.createElement('th');
				    td.appendChild(document.createTextNode(this.data[i][j]));
			        tr.appendChild(td);
				}
			}
		}
		myExt.util.css.applyCss('table.css');
		document.body.appendChild(table);
	}
	
	var data=[
	    
		['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],
		['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],
		['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],
		['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉']
	]
	var thead=['标题1','标题2','标题3','标题4','标题5','标题6']
	
	
	var myTable=new Table({
	    title:'大学四年',
	    data:data,
	    thead:thead
	});
 
 
 
最后送大家一个纯js的canvas饼图，忘掉flash把。