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

下面介紹一下怎么使用這個(gè)插件。（就算是官方api吧，哈哈，內(nèi)容不多，保證一下子就學(xué)會(huì)的。）

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

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

EasyTable.draw();

然后在該方法里面?zhèn)魅胍粋€(gè)object，該object的內(nèi)容如下（只有targetId是必選的，其他都可以選填）：

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

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

接著是row屬性，決定你的table有多少行。默認(rèn)是一行。如果你現(xiàn)在有四個(gè)內(nèi)容想要填寫進(jìn)這個(gè)table，并且你設(shè)置的列數(shù)是3列的話，那么第一行就會(huì)有你所放入的三個(gè)數(shù)據(jù)，第二行由插件自動(dòng)生成，第一個(gè)td存放你的第四個(gè)數(shù)據(jù)，后兩個(gè)td放空。

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

data屬性，傳入一個(gè)數(shù)組，用于保存你想要在table里面存放的數(shù)據(jù)。當(dāng)總格數(shù)大于data.length時(shí)會(huì)以空td自動(dòng)補(bǔ)全table，小于時(shí)則會(huì)新建新的行來將數(shù)據(jù)存放進(jìn)去。這個(gè)過程是自動(dòng)的，用戶不需要擔(dān)心。

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

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

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

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

接下來是colspan和rowspan方法，都是傳入一個(gè)object，示例：colspan:{"(1,1)":2, "(2,2)":3} 雙引號(hào)里面的坐標(biāo)和我們初中高中時(shí)學(xué)的坐標(biāo)是一樣的。(1,1)即表示第一行第一列的那一個(gè)，其他的以此類推，colspan是跨列，rowspan是跨行。我不建議大家過多使用這兩個(gè)方法，因?yàn)楹苋菀自斐杀砀窕靵y，而且colStyle和rowStyle屬性設(shè)置會(huì)被這些跨行和跨列的格子干擾到。

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

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

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

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

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

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

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

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

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

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

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

}

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

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

var tables = [ ]; //首先創(chuàng)建一個(gè)數(shù)組，用于保存所有的table，因?yàn)樵谝粋€(gè)html頁面里面，EasyTable.js是可以無限次使用的。

var div = document.createElement("div"); //用js隨便創(chuàng)建一個(gè)div對(duì)象。

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

document.body.appendChild(div); //然后我們?cè)赽ody里面隨便放一個(gè)div。

?EasyTable.draw({
??????? targetId: "abc",? //綁定那個(gè)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對(duì)象放進(jìn)上面創(chuàng)建的那個(gè)數(shù)組里面了
??????? }
})

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

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

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

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

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

首先是data，傳入數(shù)組，這個(gè)不需要再解釋了吧？

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

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

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

接著是attrs，傳入的是數(shù)組，數(shù)組里面是各個(gè)object，類比attr，作用于各個(gè)td。

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

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

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

（剛剛那個(gè)toggleStyle不會(huì)變色是因?yàn)樯厦娴氖纠衪d的背景色設(shè)置了天藍(lán)色，tr就無效了，所以我重新給出一個(gè)例子，這次我去掉了上面的tdStyle里面的背景色，并且執(zhí)行了addTr三次）

有了上面的方法之后，其實(shí)一般的動(dòng)態(tài)插入數(shù)據(jù)的情況已經(jīng)是可以輕松應(yīng)付的了。（只需要寫一個(gè)for循環(huán)或者用jquery的$.each()重復(fù)執(zhí)行這個(gè)addTr的方法即可。）

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。