EasyTable.js，令html的table布局变得非常简单！

过年之前由于工作的需要，我花了一周的时间开发了一个纯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，如果大家发现问题的话，可以在这里留言，我有空就会马上处理和升级这个插件的。最后祝各位程序员读者朋友开工大吉，新年快乐，羊年行好运！！