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

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

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

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



 

<pre class="javascript" name="code">data是表格中的数据，thead是什么就不用说了吧 
<pre class="javascript" name="code">data是表格中的数据，thead是什么就不用说了吧

 

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

 

当然，每次都想一行就创建这样一个表格，需要进行一定封装，代码如下，写的很随意， 没仔细推敲，没注释，也没有任何容错处理，凑合来吧。

很明显模仿的Ext的表格。

[javascript]  
 
 
[javascript] 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 
    }); 
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
 });[javascript] <span style="font-family:Arial;BACKGROUND-COLOR: #ffffff"></span>  
<span style="font-family:Arial;BACKGROUND-COLOR: #ffffff"></span> [javascript] <span style="font-family:Arial;BACKGROUND-COLOR: #ffffff"></span><span style="font-size:13px;"> </span> 
<span style="font-family:Arial;BACKGROUND-COLOR: #ffffff"></span><span style="font-size:13px;"> </span>[javascript] </pre><pre class="javascript" name="code"><span style="font-family:Arial;BACKGROUND-COLOR: #ffffff"></span>  
</pre><pre class="javascript" name="code"><span style="font-family:Arial;BACKGROUND-COLOR: #ffffff"></span> 
最后送大家一个纯js的canvas饼图，忘掉flash把。

 

摘自 songzheng_741的专栏