過年之前由于工作的需要，我花了一周的時間開發了一個純js的網頁插件，EasyTable.js。顧名思義，這個插件就是用來處理html里面的table的各種情況的。很多網站不喜歡使用table布局，因為table布局雖然排版能力強，但是改動能力差，一旦寫死之后想要增刪里面的數據都會變得非常麻煩。但是table布局比起使用float布局有一個明顯的好處，那就是table布局可以很方便地加上邊框。而如果在一個float布局里面的某個div標簽上加上哪怕只有1px的邊框，都會使得原本排列得好好的布局立刻就換行了。雖然可以通過其他方法解決這個問題，但畢竟解決方案并不簡便。而且，table布局對于同類數據（尤其是表格類的數據）來說，有著得天獨厚的優勢。好了，廢話不多說，馬上說一下我的插件。這個插件原大小是30k左右，經過壓縮之后只有14k，我想對于一個網頁來說，14k的小插件應該還是可以接受的吧？兼容性方面，在ie8以上的ie和火狐、谷歌都是沒問題的。沒測試過safari和opera，但估計不會有任何問題。至于低版本的ie，呵呵，非常討厭，希望他們早日在中國市場消失吧，不去考慮兼容他們了。能不能用，本人沒測試，看造化吧哈哈。

下面介紹一下怎么使用這個插件。（就算是官方api吧，哈哈，內容不多，保證一下子就學會的。）

首先，這個插件真正需要用到的方法只有三個，其他的內部方法是不需要用到的。那么我們就依次介紹一下這三個方法。

第一個方法是用來繪制table的，如下：

EasyTable.draw();

然后在該方法里面傳入一個object，該object的內容如下（只有targetId是必選的，其他都可以選填）：

首先是targetId:"某某id", 這個屬性是必須填寫的，創建的table會作為子對象存放于指定id的對象。使用id是為了保證執行速率的最優化，由于我不打算寫過多不必要的代碼在對象綁定這一塊上，所以只使用最簡單也是最有效率的document.getElementById()方法來處理對象的綁定。如果你的頁面里面只有一個table的話，那么可以在body下方加一個div，將我們的table置于該div下方即可。

接下來是col屬性，填寫的必須是數字，也就是決定你的table有多少列，如果不填的話那么默認就是三列。

接著是row屬性，決定你的table有多少行。默認是一行。如果你現在有四個內容想要填寫進這個table，并且你設置的列數是3列的話，那么第一行就會有你所放入的三個數據，第二行由插件自動生成，第一個td存放你的第四個數據，后兩個td放空。

type屬性，目前只能填寫"vertical"，如果不填的話那么你的數據就是按照正常的從第一行開始，然后第二行第三行排列以此類推，如果填寫vertical的話那么數據就會縱向排列。但是必須注意的是，數據只有在總格數（也就是col和row的乘積）大于等于數據的總長度的時候才會正常排列。多出的部分會以正常的橫向排列自動擴充進你的表格當中。

data屬性，傳入一個數組，用于保存你想要在table里面存放的數據。當總格數大于data.length時會以空td自動補全table，小于時則會新建新的行來將數據存放進去。這個過程是自動的，用戶不需要擔心。

deuce屬性，這個單詞就是平分的意思。顧名思義，如果將這個屬性設置為true的話，那么各列的寬度就會固定下來，按照100%除以列的數量進行平分，當然如果是想設置各列不同寬度的話，那就要用到下面的colStyle而不是這個deuce了。

tdStyle屬性，傳入一個字符串，比如：tdStyle:"background-color:yellow;border:1px solid green;height:40px;"這個屬性將會影響全部td的Style，請注意。

trStyle和tableStyle屬性類比上面的tdStyle，就不再贅述了。

colStyle和rowStyle屬性，列屬性和行屬性，傳入的是數組，數組里面從第一個值開始作用于指定的第一行 / 列。舉個例子，假設想要作用于第二行的背景色而不想作用于第一行的話，那么就寫：colStyle:["","background-color:yellow"]; （實際上這兩個方法用得并不多，因為我給所有的tr和td都創建了特定的id，如果只想要局部操作的話用id對dom對象進行操作速度更快） 需要注意的是，如果調用了下面的插入行 / 列的方法，這兩個屬性對于新插入的行或者列是無效的。至于為什么會無效，并不是我疏忽留下的bug，而是因為有時候項目需要對table進行插入時，插入的內容并不想受到原有的style的影響。如果覺得需要的話，自己再把屬性加上去就可以了。

接下來是colspan和rowspan方法，都是傳入一個object，示例：colspan:{"(1,1)":2, "(2,2)":3} 雙引號里面的坐標和我們初中高中時學的坐標是一樣的。(1,1)即表示第一行第一列的那一個，其他的以此類推，colspan是跨列，rowspan是跨行。我不建議大家過多使用這兩個方法，因為很容易造成表格混亂，而且colStyle和rowStyle屬性設置會被這些跨行和跨列的格子干擾到。

接下來是添加列或者行的方法。

appendCol:{ 0:2, 1:4 }; 這個是在第一列后面再加兩列(空白列)，然后在第二列后面再加4列。同理prependCol?? appendRow?? prependRow方法就不需要介紹了吧？

接下來是emptyCol和emptyRow方法，可以傳入一個數字或者一個由數字組成的數組，清空指定的行和列的內容(注意不是把整行整列刪掉，只是清空里面的內容而已)

接著是removeCol和removeRow，和上面用法一樣，這次就是徹底移除了。

再就是trAttr方法，示例：trAttr: { "onclick": ["alert(1)", "alert(2)"] ,"onmouseover":["this.style.backgroundColor='red'"],"onmouseout":["this.style.backgroundColor='white'"]},

首先傳入的是一個對象，這個對象里面的各個屬性就是不同的attr，比如onclick、onmouseover等等，這些屬性后面是一個數組，表示作用于第幾個tr。可能有人會說，這樣的方法處理整個表格也太麻煩了吧？沒錯，是非常麻煩。而且真正工作的時候也不會有人這么弄的。這個方法僅僅是用于比較小的table，體積比較龐大的table對象，我們另有方法處理，放心。繼續看下去就豁然開朗了。

有trAttr就有tdAttr，下面還是給個示例 tdAttr: {"onmouseover":["(1,1)[alert(1)]","(2,1)[alert(2)]"] },請仔細看好，這次是數組里面存放了兩個字符串，并且這兩個字符串的格式都是一個坐標加上一個偽數組。tdAttr同樣是使用起來不方便而且比較頭疼的方法，僅適用于小規模的table的使用。

最后一個屬性是callback，返回一個帶有table和tableid的function，便于用戶對這個table直接進行操作。本來我是打算將所有tr和td一并以數組的形式返回的，但是那樣的話會讓這個插件增加不必要的體積，所以就算了。我相信得到table對象的話，要對table下方的tr和td操作也不是什么難事吧？更何況我的tr和td還有特定的id（具體怎樣，用戶自己生成一個table然后debug看一下就一清二楚了，這里就不浪費篇幅贅述了。）

使用示例：callback:function(table,tableid){

table.style.backgroundColor = "red"; //返回的table對象是dom，可以直接操作。

// $("#"+tableid).css("background-color","red"); ??????? 又或者用jquery的寫法

}

好了，到此為止，我們的EasyTable的第一個方法已經介紹完畢了。如果僅僅是用來生成不太復雜的靜態布局的話，上面的方法其實已經是綽綽有余的了。但是正如剛才所提到的，如果是比較龐大的，或者是動態的table布局，那么上面的方法是還是不行的。于是下面將介紹兩個方法，也就是addTr和addTd，用于動態的對Tr或者Td進行添加。這樣的話，配合ajax等請求數據的方法，用戶就可以實現動態地加載table了。好了，廢話不多說，下面請看：

addTr方法也是傳入一個object對象。為了清楚一下，順便總結一下上面的draw方法，我寫一個示例：

var tables = [ ]; //首先創建一個數組，用于保存所有的table，因為在一個html頁面里面，EasyTable.js是可以無限次使用的。

var div = document.createElement("div"); //用js隨便創建一個div對象。

div.id = "abc";? //隨便給這個div對象一個id，這里就隨便寫啦，abc就行了，只要讀者看得明白就行，如果讀者不懂js，只會jquery的話，那也無所謂，這幾句的作用相當于在body里面創建一個div，然后把div的id命名為abc，說得這么直白應該都懂了吧？

document.body.appendChild(div); //然后我們在body里面隨便放一個div。

?EasyTable.draw({
??????? targetId: "abc",? //綁定那個div
??????? data: [1, 2, 3, 4, 5],
??????? deuce:true,
??????? tdStyle: "background-color:deepskyblue;text-align:center;border:1px solid gray;height:30px;",
??????? col: 3,
??????? callback: function (table) {
??????????? tables.push(table); //這里我把table對象放進上面創建的那個數組里面了
??????? }
})

都說無圖無真相，那我就插入一張圖吧，我平時喜歡用火狐和firebug調試，不過為了證明ie也是可以用這個插件的，所以我先用ie測試。

EasyTable.addTr({
??????? target: tables[0],
??????? data: ["小明","小李"],
??????? styles: ["color:red;font-size:19px", ],
??????? attr: { "onclick": "alert(1)" },
??????? toggleStyle:"background-color:#ccc",
??? })；

這是ie和火狐的插入行的情況對比，在火狐里面，默認的字體的垂直居中的，但是ie并不是，所以需要自己設置一下，這里就不贅述了。

target屬性指的是table對象，而不是其id，如果用jquery的話，其實可以這樣寫：

target: $("#EasyTable0")[0];?? //用EasyTable創建的table，id是按照他們所創建的序列號命名的，非常簡單，比如第一個就是EasyTable0，第二個就是EasyTable1。

首先是data，傳入數組，這個不需要再解釋了吧？

接著是style屬性，作用于一整行tr的，傳入的是字符串，

接著是styles屬性，傳入的是數組，作用于這一行tr里面的各個td。

接著是attr，傳入的是一個object，作用的是整行tr。

接著是attrs，傳入的是數組，數組里面是各個object，類比attr，作用于各個td。

toggleStyle屬性，這個屬性和style其實是一樣的，但是它是周期循環的，一次執行的話，那么下一次就不執行，再下一次又執行了。什么意思呢，舉個例子，你現在對一個table插入五行（也就是調用了addTr()方法五次），設置了toggleStyle:"background-color:red"，那么第一行就會變紅色，第二行不會，第三行又變成了紅色，第四行不會，第五行也變成了紅色……這樣就明白這個屬性的作用了吧？

如果想讓這個屬性是從第二個開始作用怎么辦，只需要在draw的callback方法里面加上一句：table.trToggleStyle = false; 就行啦。

同理，還有toggleAttr，和attr是一樣的，也是周期循環。要從第二個開始也可以在draw的callback里面加上table.trToggleAttr = false; 不過估計這個比較少用吧？反正先開發著，以后可能會用到。

（剛剛那個toggleStyle不會變色是因為上面的示例中td的背景色設置了天藍色，tr就無效了，所以我重新給出一個例子，這次我去掉了上面的tdStyle里面的背景色，并且執行了addTr三次）

有了上面的方法之后，其實一般的動態插入數據的情況已經是可以輕松應付的了。（只需要寫一個for循環或者用jquery的$.each()重復執行這個addTr的方法即可。）

最后是addTd方法，和addTr方法大同小異，也是需要綁定一個目標table，然后進行插入，該方法會自動識別你指定的table的最后一個空位置，然后把東西放進去，而不會另起一行。不過需要注意的是，如果table是vertical方式排列并且格子數目已經不夠的情況下，那么addTd就會變成正常的橫向排列插入。另外，emptyCol和emptyRow方法去掉的格子不算哈。

該方法同樣有data、style、attr、toggleStyle、toggleAttr等屬性，用法和上面的addTr方法是一模一樣的，就沒必要重復一遍了。如果想讓toggle屬性是從第二個開始作用，只需要在draw的callback方法里面加上一句：table.tdToggleStyle = false; 就行啦。

好了，EasyTable.js的說明就介紹到這里。下面當然就是給出鏈接了，歡迎大家使用：http://download.csdn.net/detail/sinolzeng/8456089

目前的版本可能會有個別小bug，如果大家發現問題的話，可以在這里留言，我有空就會馬上處理和升級這個插件的。最后祝各位程序員讀者朋友開工大吉，新年快樂，羊年行好運！！

總結

以上是生活随笔為你收集整理的EasyTable.js，令html的table布局变得非常简单！的全部內容，希望文章能夠幫你解決所遇到的問題。

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