一行js代碼！實現一個簡潔表格 – Javascript教程_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的專欄