EasyTable2.1 功能更加强大，bug全面修复的html table插件！
生活随笔
收集整理的這篇文章主要介紹了
EasyTable2.1 功能更加强大，bug全面修复的html table插件！
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
2015年5月25日更新，目前et已經(jīng)升級(jí)到2.1的版本了，具體請(qǐng)看鏈接：http://download.csdn.net/detail/sinolzeng/8735873
我已經(jīng)將所有內(nèi)容做成demo.html，并附帶了et的原版和壓縮版。使用時(shí)將et的壓縮版引入頁面即可，不需要依賴于jquery。
最近整理和修復(fù)了1.0的全部bug，并且給2.0添加了不少新功能。由于語法上有些修正，所以我重新寫了一個(gè)非常詳細(xì)的demo.html在文檔里面，這里直接貼出（由于添加了新的功能，et的2.0的壓縮版本已經(jīng)達(dá)到了20k的體積了，雖然略顯大一些，但是我相信從功能上來講覺得是劃得來的。）：
<html> <head><title></title><style type="text/css">* {margin: 0;padding: 0;}</style> </head> <body><p style="height: 50px; line-height: 50px; text-align: center; font-family: 黑體; font-size: 22px;">EasyTable全教程</p><div id="target"></div> </body> <script type="text/javascript" src="EasyTable.js"></script> <script type="text/javascript">/*** 解除注釋即可查看運(yùn)行情況，建議使用火狐瀏覽器的firebug一邊調(diào)試一邊查看，注意每一次只查看一條，一次性全部查看會(huì)導(dǎo)致et.table0錯(cuò)誤。 ***//*插件支持瀏覽器：所有現(xiàn)代瀏覽器，ie8、9。但需要注意，ie瀏覽器的語法非常嚴(yán)(qi)謹(jǐn)(pa)，需要特別小心，另外ie有時(shí)候不支持margin:0 auto等類型的語法糖，直接使用會(huì)導(dǎo)致錯(cuò)誤。同時(shí)ie不能在object或數(shù)組中存在多余的逗號(hào)，所有方法結(jié)尾都要加上分號(hào)。*//***** 友情提醒：珍愛生命，遠(yuǎn)離IE！！ *****///1.用EasyTable插件創(chuàng)建一個(gè)table表格。///我們需要利用EasyTable的draw方法，并傳入一個(gè)Object，該Object的targetId屬性綁定一個(gè)在body中的對(duì)象的id，我們的table就會(huì)在此id下創(chuàng)建。//EasyTable.draw({ targetId:"target" });//2.如果不采用targetId屬性直接檢索頁面元素的話，也可以用target屬性直接傳入一個(gè)頁面元素。//EasyTable.draw({// target: document.getElementById("target")//});////如果使用jquery則是：//EasyTable.draw({// target: $("#target")[0]//});//3.但請(qǐng)注意，如果以上兩個(gè)屬性同時(shí)出現(xiàn)，那么只會(huì)使用targetId屬性的綁定。//EasyTable.draw({// target: document.getElementById("target"),// targetId: "target2"//});//4.由于EasyTable.draw()的寫法略顯羅嗦，所以用戶可以直接用et.draw()代替，另外，也可以用：var 你設(shè)定的名字 = et;來自定義EasyTable的名字。//et.draw({ targetId: "target" });//var myName = et;//myName.draw({ targetId: "target2" });//5.EasyTable.draw()（以下簡(jiǎn)稱et.draw()）傳入數(shù)據(jù)非常簡(jiǎn)單，只需要在data屬性里傳入一個(gè)數(shù)組即可，默認(rèn)情況下et是三列，數(shù)據(jù)將自動(dòng)按照每行三個(gè)依次排列下去，多余地方由空的td補(bǔ)全。//et.draw({// targetId: "target",// data: [1, 2, 3, 4, 5]//});//6.用戶可以自定義列數(shù)，使用col屬性：(col屬性并不是必須的，但是多數(shù)情況下我們會(huì)自定義列數(shù)。)//et.draw({// targetId: "target",// data: [1, 2, 3, 4, 5],// col:2//});//7.用戶可以自定義行數(shù)，使用row屬性：(但注意，如果data的數(shù)組長度大于用戶給定的行列數(shù)的乘積，那么et會(huì)自動(dòng)生成新的tr進(jìn)行補(bǔ)全，而不是拋棄放不下的數(shù)據(jù)。row屬性并不是必須的，大部分情況下都不需要用到該屬性。)//et.draw({// targetId: "target",// data: [1, 2, 3, 4, 5, 6, 7, 8, 9],// col: 4,// row: 2//});//8.用戶可以設(shè)定tableStyle屬性、trStyle屬性和tdStyle屬性來設(shè)定你的table、tr和td的相關(guān)style。即使用戶不進(jìn)行任何設(shè)置，默認(rèn)情況下，table也會(huì)加上兩個(gè)style：width:100%和border-collapse:collapse。通常情況下，trStyle和tdStyle只需要用一個(gè)就夠了。//et.draw({// targetId: "target",// tableStyle: "width:90%;margin:0 auto;text-align:center;",// trStyle: "height:40px;color:white;",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;",// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//9.在使用table時(shí)，經(jīng)常需要處理的情況就是列之間的寬度的平分，這里我們可以使用deuce屬性，只需要設(shè)置為true。那么table就會(huì)自動(dòng)幫你設(shè)置列的寬度平分。//et.draw({// targetId: "target",// tableStyle: "width:90%;margin:0 auto;text-align:center;",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//10.每次使用draw方法，生成的table都有一個(gè)共同的class：EasyTable。同時(shí)第一個(gè)的id為EasyTable0，第二個(gè)是EasyTable1，以此類推。同時(shí)也會(huì)生成一個(gè)對(duì)應(yīng)的et屬性。比如，et.draw({ ..... }); 使用et.table0 等價(jià)于 document.getElementById("EasyTable0")。//11.每次生成draw方法，如果使用普通方法清除掉運(yùn)行過程中的table的話，該序列號(hào)并不會(huì)被回收。即：假設(shè)你清除了id為EasyTable1的table后再執(zhí)行et.draw()方法，下次生成的是id為EasyTable2。為了解決這個(gè)問題，可以使用destroy()方法。et.destroy(et.table1);那么下次你再使用draw方法時(shí)，得到的新的table的id還是EasyTable1。這樣的話et.table1屬性訪問到的就是你的新table，而不會(huì)變成undefined。//destroy()方法允許傳入多個(gè)table，一次性銷毀多個(gè)table并回收多個(gè)序列號(hào)。如：et.destroy(et.table0,document.getElementById("EasyTable1"));//destroy()方法也可以不傳入任何參數(shù)。那么將會(huì)銷毀所有的table。請(qǐng)慎用：et.destroy();//12.et.draw()可以為指定的格子進(jìn)行colspan和rowspan的設(shè)置，并且可以一次性設(shè)置多個(gè)。（坐標(biāo)的第一個(gè)表示某一行tr，從0開始數(shù)起，坐標(biāo)的第二個(gè)值表示該tr中的某一個(gè)td，也是從0開始數(shù)起。"(1,0)"即表示第二行的第一個(gè)。需要注意的是，這兩個(gè)屬性不能與下面的添加行、列等功能配合，并且該功能容易造成數(shù)據(jù)的難以理解，不建議大規(guī)模使用。）具體格式如下：//et.draw({// targetId: "target",// tableStyle: "width:90%;margin:0 auto;text-align:center;",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// colspan: { "(0,0)": 2,"(0,1)":2 },// rowspan: { "(0,0)": 3 },// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//13.et.draw()擁有豎向排列數(shù)據(jù)的功能。使用type屬性并設(shè)置為vertical即可。但是該功能對(duì)于后面要介紹到的addTd功能有一個(gè)小沖突。后面會(huì)詳述。//et.draw({// targetId: "target",// tableStyle: "width:90%;margin:0 auto;text-align:center;",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// type: "vertical",// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],// col: 4//});//14.et.draw()可以對(duì)原有的table進(jìn)行擴(kuò)展，即：appendCol、appendRow方法：("0":2 的意思是在第1列的右邊插入2列，"1":4 的意思是在第二行的下面插入四行。)//et.draw({// targetId: "target",// tableStyle: "width:90%;margin:0 auto;text-align:center;",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// appendCol: { "0": 2, "1": 3 },// appendRow: { "1": 4 },// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//15.同理，也有 prependCol 和 prependRow 方法，只是插入的位置變成左邊和上邊。//et.draw({// targetId: "target",// tableStyle: "width:90%;margin:0 auto;text-align:center;",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// prependCol: { "0": 2, "1": 3 },// prependRow: { "1": 4 },// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//16.使用colStyle 和 rowStyle 可以對(duì)指定的列、行添加style。如果兩者同時(shí)存在于一個(gè)td上，則col覆蓋row。格式為：(index)[style內(nèi)容]//注意：rowStyle是直接設(shè)置在tr上的style，如果使用了tdStyle，那么rowStyle可能會(huì)被覆蓋。后面可以用style解決該問題。//et.draw({// targetId: "target",// tableStyle: "width:90%;margin:0 auto;text-align:center;",// //tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// colStyle: "(0)[background-color:red;]",// rowStyle: "(0)[background-color:yellow]",// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//17.上面介紹了appendCol 和 prependCol，以及 appendRow 和 prependRow。下面介紹emtpyCol 和 emptyRow。作用是清空指定行、列中的數(shù)據(jù)。//et.draw({// targetId: "target",// tableStyle: "width:90%;margin:0 auto;text-align:center;",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// emptyCol: 1,//清除第二列的數(shù)據(jù)// emptyRow: [1, 2],//清除第二行和第三行的數(shù)據(jù)，這兩個(gè)方法都可以傳入一個(gè)數(shù)字或者一個(gè)數(shù)字?jǐn)?shù)組。// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//18. removeCol 和 removeRow 方法與上面的用法類似，作用是徹底刪除指定的行、列，而不僅僅是清空其中的數(shù)據(jù)。//et.draw({// targetId: "target",// tableStyle: "width:90%;margin:0 auto;text-align:center;margin-left:5%",//在ie瀏覽器中，由于對(duì)margin:0 auto的支持性欠佳，所以最好使用margin-left:5%令其居中。// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// removeCol: 1,//刪除第二列// removeRow: [1, 2],//刪除第二行和第三行，這兩個(gè)方法都可以傳入一個(gè)數(shù)字或者一個(gè)數(shù)字?jǐn)?shù)組。// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//19.et.draw()可以使用id屬性設(shè)置某一行tr的id，也可以設(shè)置某一個(gè)td的id。但請(qǐng)慎用該方法，因?yàn)閑t有些style是通過id實(shí)現(xiàn)的，如非必要，盡可能不要修改tr或者td默認(rèn)的id。//et.draw({// target: document.getElementById("target"),// tableStyle: "width:90%;margin:0 auto;text-align:center;margin-left:5%",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// //id: "(0)[xiugai]",//這里的意思是將第一行的tr的id改成：xiugai，可以傳入一個(gè)字符串，也可以傳入一個(gè)數(shù)組，20中的其他類型也一樣。// id:["(0,0)[xiugai1]","(0,1)[xiugai2]"],//(0,0)表示第一行第一個(gè)td，(0,1)表示第一行第二個(gè)td，以此類推。// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//20.et中也可以使用cls屬性修改class、style屬性修改style、html屬性修改內(nèi)部文字，用法和id一致。//et中的id、style、class、html等方法都不推薦經(jīng)常或者大量地使用。它們的作用僅僅是處理項(xiàng)目中臨時(shí)性或突然性出現(xiàn)的對(duì)局部更改的需求。//et.draw({// target: document.getElementById("target"),// tableStyle: "width:90%;margin:0 auto;text-align:center;margin-left:5%",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// cls: "(0)[newClass]",//注意：class和id不同，用該方法創(chuàng)建的class并不會(huì)覆蓋原來的class，而是增加進(jìn)去。因?yàn)橐粋€(gè)元素可以有多個(gè)class。另外由于“class”是js中的關(guān)鍵詞，在部分瀏覽器中直接寫為一個(gè)object的屬性會(huì)報(bào)錯(cuò)。為了兼容性的考慮，所以將class寫成cls。// style: "(1,0)[background-color:red]",//style方法和class方法一樣，如果目標(biāo)對(duì)象已有一定的style，則不覆蓋原有的style，而是采取追加的方式插入新的style。// html: "(2,0)[<td></td><td></td><td></td><td></td>]",//特別注意：請(qǐng)盡量不要直接修改tr的innerHTML。在ie瀏覽器中，tr的innerHTML是只讀的，無法修改（直接修改將導(dǎo)致錯(cuò)誤）。如果要修改，請(qǐng)修改td的html。// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//21.et.draw()中的attr屬性可以為元素添加attr，通常用于對(duì)元素添加onclick事件：//et.draw({// target: document.getElementById("target"),// tableStyle: "width:90%;margin:0 auto;text-align:center;margin-left:5%",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// attr: { "onclick": "(0)[alert(1)]", "onmouseover": ["(1,0)[this.style.backgroundColor='yellow']", "(1,1)[this.style.backgroundColor='green']"], "onmouseleave": ["(1,0)[this.style.backgroundColor='deepskyblue']", "(1,1)[this.style.backgroundColor='deepskyblue']"] },//注意傳入的是對(duì)象，不是數(shù)組格式。要同時(shí)作用于多個(gè)則在一個(gè)對(duì)象屬性中傳入數(shù)組。并且在ie瀏覽器中，以attr屬性的形式綁定的事件都是無法執(zhí)行的，所以如果需要考慮ie瀏覽器的話，需要用我們后面介紹到的addEvent方法。// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//22.et.draw()中的最后一個(gè)屬性，callback，回調(diào)操作，第一個(gè)參數(shù)是table元素本身，第二個(gè)元素是table的id，用戶可以根據(jù)實(shí)際需要來使用：//et.draw({// target: document.getElementById("target"),// tableStyle: "width:90%;margin:0 auto;text-align:center;margin-left:5%",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4,// callback: function (table,tableid) {// table.style.marginTop = "100px";// alert(table == document.getElementById(tableid));// }//});//上面已經(jīng)介紹完了draw()方法，在實(shí)際應(yīng)用中，動(dòng)態(tài)生成表格通常是需要根據(jù)網(wǎng)頁請(qǐng)求到的數(shù)據(jù)動(dòng)態(tài)添加tr和td。因此，下面我們將介紹addTr()和addTd()方法。//23.et.addTr()方法的target必須是一個(gè)table，data是數(shù)組，內(nèi)容是td中的innerHTML。//et.draw({// target: document.getElementById("target"),// tableStyle: "width:90%;margin:0 auto;text-align:center;margin-left:5%",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// data: [1, 2, 3],// col: 3//});//et.addTr({// target: et.table0,//這里利用的是條目10中提到的方法。// data:["新增內(nèi)容1","新增內(nèi)容2","新增內(nèi)容3"]//});//24.et.addTr()中也支持id、class、style、attr方法，根據(jù)傳入的是字符串或者數(shù)組來判斷作用于tr還是td。//var tb;//et.draw({// targetId: "target",// tableStyle: "width:90%;margin:0 auto;text-align:center;margin-left:5%",// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// //data: [1, 2, 3],在沒有data的情況下，et也會(huì)默認(rèn)生成一行空的tr。// col: 3,// callback: function (table) {// tb = table;// }//});//et.addTr({// target: tb,//這里我們介紹另一種方法獲取目標(biāo)table，就是用一個(gè)變量在上面的callback中將table記錄下來。// data: ["新增內(nèi)容1", "新增內(nèi)容2", "新增內(nèi)容3"],// id: "xiugai",//作用于tr// cls: "newClass",//作用于tr// style: "font-family:隸書",//作用于tr// attr: { "onclick": "alert(1)" }//老慣例，這種onclick的事件設(shè)置方法在ie瀏覽器是無效的。//});//et.addTr({// target: tb,// data: ["新增內(nèi)容4", "新增內(nèi)容5", "新增內(nèi)容6"],// id: ["xiugai1", "xiugai2", "xiugai3"],//作用于三個(gè)td。// cls: ["new1", "", "new3"],//作用于第一個(gè)td和第三個(gè)td，第二個(gè)td相當(dāng)于沒有添加新的class。// style: ["background-color:yellow", "background-color:red", "background-color:blue"],//分別加上三種不同的背景色。// attr: { "onclick": "alert(1)", "onmouseover": ["", "this.style.backgroundColor='deepskyblue'"], "onmouseleave": ["", "this.style.backgroundColor='red'"] }//作用于第一個(gè)和第二個(gè)td。//});//25.addTr()中有toggleStyle和toggleAttr方法，作用于tr。意思是在生成的tr中，如果第一個(gè)tr得到了style/attr，那么下一個(gè)就不會(huì)得到該style/attr，而再下一個(gè)又會(huì)得到。以此類推。常見的例子就是tr的隔行變色：//et.draw({// targetId: "target",// tdStyle: "border:1px solid black;height:30px;text-align:center;",// callback: function (table) {// for (var i = 0; i < 10; i++) {// et.addTr({// target: table,// data: ["第" + (i + 1) + "行-第一個(gè)", "第" + (i + 1) + "行-第二個(gè)", "第" + (i + 1) + "行-第三個(gè)"],// toggleStyle: "background-color:#d9d9d9;",// toggleAttr: { "onclick": "alert(" + (i + 1) + ")" }//在ie瀏覽器無法觀察到其點(diǎn)擊事件。// });// }// }//});//26.上面的例子中，toggleStyle和toggleAttr中都是從第一行（也就是第一個(gè)tr）開始的，如果想從第二個(gè)（即偶數(shù)行開始），需要進(jìn)行以下設(shè)置：//在table的callback中加上：table.trToggleStyle = false;table.trToggleAttr = false;//et.draw({// targetId: "target",// tdStyle: "border:1px solid black;height:30px;text-align:center;",// callback: function (table) {// table.trToggleStyle = false;table.trToggleAttr = false;//就是這一行// for (var i = 0; i < 10; i++) {// et.addTr({// target: table,// data: ["第" + (i + 1) + "行-第一個(gè)", "第" + (i + 1) + "行-第二個(gè)", "第" + (i + 1) + "行-第三個(gè)"],// toggleStyle: "background-color:#d9d9d9;",// toggleAttr: { "onclick": "alert(" + (i + 1) + ")" }//在ie瀏覽器無法觀察到其點(diǎn)擊事件。// });// }// }//});//27.addTr()方法也有callback。第一個(gè)參數(shù)是tr自己，第二個(gè)參數(shù)是它以下的td的數(shù)組集合，請(qǐng)注意是數(shù)組。//et.draw({// targetId: "target",// tdStyle: "border:1px solid black;height:30px;text-align:center;"//沒有設(shè)置col（列數(shù)）時(shí)則col為3。//});//et.addTr({// target: et.table0,// callback: function (tr, tds) {// tr.style.backgroundColor = "green";// var arr = ["測(cè)試1", "測(cè)試2", "測(cè)試3"];// for (var i = 0; i < tds.length; i++) {// tds[i].innerHTML = arr[i];// tds[i].style.color = "white";// }// }//});//28.addTd()方法與addTr()方法非常類似，但需要注意，如果用戶創(chuàng)建的table中存在空白格，則addTd()方法會(huì)自動(dòng)將內(nèi)容追加到空白格中。但這些空白格對(duì)appendCol、appendRow、prependCol和prependRow生成的空白格無效。//et.draw({// targetId: "target",// tdStyle: "border:1px solid black;height:30px;text-align:center;",// data: [1, 2],// deuce: true,// col: 6,// //請(qǐng)通過注釋和解除注釋下面的callback來查看效果。// callback: function (table) {// for (var i = 0; i < 6; i++) {// et.addTd({// target: table,// data: "新增內(nèi)容" + (i + 1),//由于每次只插入一個(gè)td，因此插入的data只能是一個(gè)字符串，而不能是數(shù)組。// id: "xiugai" + (i + 1),//id傳入的是字符串。// cls: "newClass" + (i + 1),//class同上。// style: "background-color:deepskyblue",//style同上。// attr: { "onclick": "alert(" + (i + 1) + ")" }//attr類比addTr()中的attr。// });// }// }//});//29.addTd()中的callback返回的是該td。同樣也有toggleStyle和toggleAttr方法：//et.draw({// targetId: "target",// tdStyle: "border:1px solid black;height:30px;text-align:center;",// data: [1, 2],// deuce: true,// col: 6,// callback: function (table) {// table.tdToggleStyle = false; table.tdToggleAttr = false;//這一行的兩句表示toggle將從第二個(gè)開始，和上面的tr的用法是一樣的。只是將tr改成了td。// for (var i = 0; i < 6; i++) {// et.addTd({// target: table,// data: "新增內(nèi)容" + (i + 1),// style: "background-color:yellow;",// toggleStyle: "background-color:deepskyblue;",//注意，在ie瀏覽器中，如果一個(gè)dom對(duì)象的style里同時(shí)擁有兩個(gè)相同的設(shè)置，（比如都是background-color），那么ie會(huì)同時(shí)刪除兩個(gè)，而不是保留第二個(gè)！也就是說，這樣做的結(jié)果是兩個(gè)style屬性一起消失！如果用戶想要兼容垃圾到不能再垃圾的ie瀏覽器，需要在for循環(huán)中設(shè)置style如下：// //style:"background-color:"+( i%2 == 0 ? "yellow" : "deepskyblue" ),// toggleAttr: { "onclick": "alert(" + (i + 1) + ")" },// callback: function (td) {// td.style.fontFamily = '隸書';// }// });// }// }//});//30.當(dāng)table的type為vertical時(shí)，如果addTd()方法填滿了指定格子數(shù)（也就是行與列的乘積），則又會(huì)變成橫向排列了，示例如下：//et.draw({// targetId: "target",// col: 6,// row: 6,// type:"vertical",// deuce: true,// callback: function (table) {// console.log(table.row + " " + table.col)// for (var i = 0; i < 40; i++) {// et.addTd({// target: table,// data: i,// style:"background-color:deepskyblue;height:40px;border:1px solid #7f7f7f;text-align:center;"// });// }// }//});//在瀏覽器中查看會(huì)發(fā)現(xiàn)，超過35的36、37、38、39自動(dòng)以橫向的形式排列在最下方的一行上。造成這種現(xiàn)象的原因是et是以col乘以row的格子進(jìn)行數(shù)據(jù)排列的，當(dāng)格子不夠時(shí)只能以橫向并入。為了解決這個(gè)問題，最好是在運(yùn)行前先通過其他方法判斷所需的行數(shù)和列數(shù)，然后再設(shè)置好行列數(shù)，然后再執(zhí)行draw({type:"vertical"});//31.上面已經(jīng)介紹完了et中最重要的三個(gè)方法：draw() 、 addTr() 、 addTd() 以及destroy()，下面介紹hook方法：//et.draw({// targetId: "target",// data: [1, 2, 3, 4, 5, 6, 7],// deuce:true,// tdStyle: "background-color:deepskyblue;border:1px solid black;text-align:center;"//});et.hook()方法傳入三個(gè)變量，第一個(gè)必填，是目標(biāo)table，第二個(gè)必填，是目標(biāo)的tr或者td，例：(0)表示第一個(gè)tr，(1,1)表示第二個(gè)tr的第二個(gè)td。第三個(gè)參數(shù)是回調(diào)函數(shù)，選填，如果不填，則hook直接返回獲取到的dom對(duì)象，如果填入，則在callback中能使用該dom作為參數(shù)。//var firstTr = et.hook(et.table0, "(0)");//firstTr.style.fontSize = '30px';//et.hook(et.table0, "(2)", function (tr) {// tr.style.color = "red";// tr.style.fontWeight = "bold";// tr.style.fontSize = "34px";//});//et.hook(et.table0, "(1,0)", function (td) {// td.style.backgroundColor = "green";//});//32.et.addEvent()方法用于對(duì)指定的對(duì)象添加事件。通常與hook()方法配合使用。addEvent()方法需要傳入三個(gè)參數(shù)，第一是dom對(duì)象，第二是事件類型，如click等（注意不要傳入on字段），第三個(gè)參數(shù)是執(zhí)行事件的內(nèi)容，傳入一個(gè)function。//et.draw({// targetId: "target",// data: [1, 2, 3, 4, 5],// deuce: true,// tableStyle:"text-align:center;font-size:30px;",// tdStyle: "background-color:green;color:white;border:1px solid black;height:40px;"//});//et.hook(et.table0, "(0,0)", function (td) {// et.addEvent(td, "click", function () {// alert(td.id);// });//});//33.et.clone()方法用于對(duì)指定的對(duì)象進(jìn)行克隆，可以復(fù)制對(duì)象本身、對(duì)象的各種屬性，以及對(duì)象重生等三種功能。實(shí)際上clone()是hook()方法的升級(jí)和封裝。第一個(gè)參數(shù)和第二個(gè)參數(shù)同hook，第三個(gè)參數(shù)下面詳述：//et.draw({// targetId: "target",// data: [1, 2, 3, 4, 5],// deuce: true,// tableStyle: "text-align:center;font-size:30px;",// tdStyle: "background-color:green;color:white;border:1px solid black;height:40px;",// style: "(0,0)[background-color:yellow;color:red]",// attr: { "onclick": "(0,0)[alert(1)]" }//});//如果只傳入兩個(gè)參數(shù)，則返回指定對(duì)象的一個(gè)復(fù)制體，這里我們以tr為例，當(dāng)然，也是可以復(fù)制td的。//var tr = et.clone(et.table0, "(0)");//et.table0.getElementsByTagName('tbody')[0].appendChild(tr);如果有傳入第三個(gè)參數(shù)，并且第三個(gè)參數(shù)為字符串，則返回被指定對(duì)象的相關(guān)屬性，這里以document.write()寫在屏幕上給用戶觀看：//document.write("被克隆對(duì)象的是：table中的第一行tr的第一個(gè)td" + "<br>");//document.write("被克隆對(duì)象的id是：" + et.clone(et.table0, "(0,0)", "id") + "<br>");//document.write("被克隆對(duì)象的class是：" + et.clone(et.table0, "(0,0)", "class") + "<br>");//document.write("被克隆對(duì)象的innerHTML是：" + et.clone(et.table0, "(0,0)", "html") + "<br>");//document.write("被克隆對(duì)象的style是：" + et.clone(et.table0, "(0,0)", "style") + "<br>");//document.write("被克隆對(duì)象的style中的color是：" + et.clone(et.table0, "(0,0)", "style[color]") + "<br>");//document.write("被克隆對(duì)象的attr中的onclick是：" + et.clone(et.table0, "(0,0)", "attr[onclick]") + "<br>");//如果第三個(gè)參數(shù)為object，則是對(duì)克隆體進(jìn)行設(shè)置：//et.clone(et.table0, "(1)", {// id: "xiugai",//傳入id、cls、style、html、attr等，如果是 非數(shù)組 則傳給tr，如果是 數(shù)組 則傳給td，當(dāng)然，如果捕獲的是td，則只能傳入 非數(shù)組。// cls: "newClass",// style: ["background-color:red", "background-color:blue", "background-color:brown"],// html: [11, 22, 33],// attr: { "onclick": ["alert(1)", "", "alert(2)"] },// parent: et.table0//這里是設(shè)置克隆體的將會(huì)append到哪一個(gè)父元素下。//});//34.上面已經(jīng)介紹完了EasyTable的全部主要內(nèi)容。在et中還存在一些內(nèi)部使用的方法，它們也可以作為外部方法使用，下面將順便介紹：//et.isArray(param);//判斷參數(shù)是不是數(shù)組//et.isDOM(param);//判斷參數(shù)是不是dom頁面元素//et.isString(param);//判斷參數(shù)是不是字符串//et.isNumber(param);//判斷參數(shù)是不是數(shù)字//et.isObject(param);//判斷參數(shù)是不是對(duì)象//et.isIE();//不需要傳參，判斷當(dāng)前瀏覽器是不是ie瀏覽器。//35.刪除數(shù)組中的某個(gè)參數(shù)：//et.deleteArray(array,index);//使用示例：var arr = [1,2,3]; arr = et.deleteArray(arr,0); console.log(arr); //將會(huì)得到[2,3];//36.前置插入和后置插入，作用是在元素的前面插入一個(gè)元素（同級(jí)），或在其后面插入一個(gè)元素（同級(jí)）//insertBefore() 和 insertAfter()//使用示例：//var tar = document.getElementById("target");//var before = document.createElement("div");//var after = document.createElement("div");//et.insertBefore(tar,before);//et.insertAfter(tar,after);//37.addRule()和deleteRule()方法，可以用于在指定styleSheet中進(jìn)行rules條目的操作：//使用示例：//var style = document.createElement("style");//style.type = "text/css";//document.getElementsByTagName("head")[0].appendChild(style);最后一個(gè)變量表示插入的位置，因?yàn)槲覀兊膕tylesheet表格是新建的，所以還為空，就只能插入在第0 index的位置上。//var sheet = document.styleSheets[document.styleSheets.length - 1];//et.addRule(sheet, "#target", "background-color:yellow;width:100%;height:50px;", 0);為了讓用戶看到效果，我在下面寫了一個(gè)簡(jiǎn)單的計(jì)時(shí)器，1秒后執(zhí)行deleteRule()方法，就可以清除掉指定的樣式。//var timer = setTimeout(function () {// et.deleteRule(sheet, 0);// clearTimeout(timer);//},1000);//38.注意：在使用EasyTable時(shí)不要修改table、tablenum、tableRecycle、init、inited等屬性，否則EasyTable將會(huì)運(yùn)行錯(cuò)誤。 </script> </html>下面是EasyTable2.0的源碼，提供給大家研究和學(xué)習(xí)： // EasyTable.js 純js插件，創(chuàng)建時(shí)間：2015.02.13 當(dāng)前版本：2015.04.27 //備注：該插件雖然不需要jquery驅(qū)動(dòng)，但配合jquery使用會(huì)更加高效。/* 2015.2.17* 由于ie瀏覽器中對(duì)tr.cells屬性不兼容，所以新版本中的cells查詢?nèi)扛臑間etElementsByTagName("td");*/ /* 2015.4.23* 處理 bug：在EasyTr和EasyTd中增加這兩個(gè)名字的class，現(xiàn)在可以批量刪除新添加的內(nèi)容了。* 處理 bug：將EasyTable.tablenum在draw方法中全部替換為table.index。** 添加內(nèi)容：添加了destroy方法，現(xiàn)在可以回收EasyTable.tablenum的序列號(hào)了，媽媽再也不用擔(dān)心我的序列號(hào)爆掉了！* 回收的時(shí)候請(qǐng)使用EasyTable.destroy(你的table);** 添加內(nèi)容：添加了var et = EasyTable。現(xiàn)在在使用時(shí)可以用et簡(jiǎn)寫代替EasyTable了。*/ /* 2015.4.24* 添加內(nèi)容：在draw主方法的里面修改了id、class和style等方法，并將tr和td的方法直接合并，根據(jù)索引是(x)還是(x,y)格式來判斷是tr還是td。* 添加內(nèi)容：在EasyTr和EasyTd中增加id、class 現(xiàn)在可以在添加Tr和Td的時(shí)候順便生成id和class了，但是請(qǐng)慎用id功能。** 添加內(nèi)容：添加了hook方法，該方法可以捕獲一個(gè)table中的某一個(gè)tr或某一個(gè)指定td。* 例子1：EasyTable.hook(table,"(0,2)",function(target){ target.id = "sheep"; });* 例子2：var firstTr = et.hook(table,0); firstTd.setAttribute("onclick","alert('我是鉤子勾住的表格的第一行。')");* 例子3：$(et.hook(table,0)).css("background-color","green"); //配合jquery使用。** 添加內(nèi)容：添加了EasyTable.table+index對(duì)象屬性自動(dòng)生成，以后獲取table只需要EasyTable.table+index了。* 使用示例：EasyTable.draw({targetId;"something",col:3,data:[1,2,3]});* EasyTable.table0.style.backgroundColor = "red";* //如果進(jìn)行清除：* EasyTable.destroy(et.table0);* //下次重建table時(shí)，還是用index 0 進(jìn)行訪問：* EasyTable.draw({targetId;"somethingagain",col:3,data:[4,5,6]});* EasyTable.table0.style.backgroundColor = "blue";** 修改內(nèi)容：更新destroy方法，可以直接放入自定義的table，也可以放入一個(gè)或多個(gè)et.table+index,如果destroy()方法中的參數(shù)為空，就會(huì)清除掉所有EasyTable，慎用。* 修改內(nèi)容：原本的draw方法中的trAttr是按順序的，現(xiàn)在可以按照序列號(hào)進(jìn)行檢索了。* 修改內(nèi)容：原本的draw方法中的tdAttr的序列號(hào)是從1開始的，現(xiàn)在改為從0開始，并且由原來的 列、行檢索 改為：行、列檢索。*/ /* 2015.4.25* 修改內(nèi)容：將colspan和rowspan改為和上面一樣的行、列（index從0開始）的檢索* 處理 bug：將draw和addTr中的style.cssText后面的 = 改為 += ，這樣就可以避免樣式被覆蓋的問題。* 修改內(nèi)容：將colStyle和rowStyle改為和style的樣式一致了。* 修改內(nèi)容：修改destroy方法，現(xiàn)在可以一次性傳入多個(gè)table，一次性銷毀并回收序列號(hào)。* 添加內(nèi)容：添加clone方法，現(xiàn)在可以克隆任意的tr或者td了。實(shí)際上clone是destroy的延伸。* 添加內(nèi)容：添加draw方法中的target屬性，現(xiàn)在除了targetId之外可以將table直接生成于指定對(duì)象的下方了。* 修改內(nèi)容：將插件中的主方法里面的全部EasyTable字樣換成et。最后的var et = EasyTable 改成 var EasyTable = et;這樣做的目的是在min版本中盡可能地減少文件字符量。* /* 2015.4.27* 修改內(nèi)容：將所有以outerHTML=""的形式清除dom元素的語句全部使用removeChild代替。原因是在ie瀏覽器中，table、tr和td元素的outerHTML是只讀的，無法對(duì)其進(jìn)行操作。* 添加內(nèi)容：添加addEvent方法。* 處理bug ：將addTr中直接插入的父對(duì)象由table改為tbody，這樣就可以兼容ie瀏覽器了。* 處理bug ：修復(fù)addTd中當(dāng)type為vertical時(shí)跳過總格數(shù)就會(huì)出現(xiàn)異常的bug。* 修改內(nèi)容：將draw() addTr() 和 clone()中的attr方法的格式進(jìn)行統(tǒng)一化。* 添加內(nèi)容：在addTr中添加callback(tr,tds)，其中tr為tr元素，tds為td的元素?cái)?shù)組集合。*/ /** 提 示：EasyTable中的addRule、deleteRule、isIE、insertBefore、insertAfter、isDOM、isObject、isString、isNumber、isArray、deleteArray方法都可以隨時(shí)調(diào)用。* 注 意：在使用EasyTable時(shí)不要修改table、tablenum、tableRecycle、init、inited等屬性，否則EasyTable將會(huì)運(yùn)行錯(cuò)誤。*/var et = {tableNum: 0,tableRecycle: [],sheet: null,addRule: function (sheet, s, n, position) {("insertRule" in sheet) ? sheet.insertRule(s + "{" + n + "}", position) : sheet.addRule(s, n, position);},deleteRule: function (sheet, position) {("deleteRule" in sheet) ? sheet.deleteRule(position) : sheet.removeRule(position);},aR: function (sheet, o) {var rulelength = document.all ? sheet.rules.length : sheet.cssRules.length;//兼容ie8、9for (var i in o) {et.addRule(sheet, i, o[i], rulelength || 0);}},inited: false,init: function () {var ds = document.styleSheets, style = document.createElement("style");style.type = "text/css";document.getElementsByTagName("head")[0].appendChild(style);if (ds.length) {ds[ds.length - 1].etMark = "et";}else {ds[0].etMark = "et";}var rule = document.all ? 'rules' : 'cssRules';for (var i = 0; i < ds.length; i++) {if (ds[i].etMark == "et") {et.sheet = ds[i]; break;}}et.aR(et.sheet, { ".EasyTable": "border-collapse:collapse;width:100%;" });},insertBefore: function (target, add) {target.parentNode.insertBefore(add, target);},insertAfter: function (target, add) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(add);}else {parent.insertBefore(add, target.nextSibling);}},isIE: function () { return navigator && navigator.userAgent.match(/msie/i); },setTableInnerHTMLinIE: function (table, html) {var temp = table.ownerDocument.createElement('div');temp.innerHTML = '<table><tbody>' + html + '</tbody></table>';if (table.tBodies.length == 0) {var tbody = document.createElement('tbody');table.appendChild(tbody);}table.replaceChild(temp.firstChild.firstChild, table.tBodies[0]);},isDOM: function (o) {return (typeof HTMLElement === 'object') ? (o instanceof HTMLElement) : (o && (typeof o === "object") && (o.nodeType === 1) && (typeof o.nodeName === "string"))},isObject: function (o) { return (typeof o == 'object') && (o.constructor == Object); },isNumber: function (n) { return (typeof n == 'number') && (n.constructor == Number); },isString: function (s) { return (typeof s == 'string') && (s.constructor == String); },isArray: function (a) { return (typeof a == 'object') && (a.constructor == Array); },deleteArray: function (a, n) { return a.slice(0, n).concat(a.slice(n + 1, a.length)) },draw: function (o) {if (!et.inited) { et.init(); et.inited = true; }function createTableContent(table, data, col, row, num, colspan, rowspan, colStyle, rowStyle, vertical) {function create() {var tmp = [];for (var c = 0; c < col; c++) {tmp.push('<td>*</td>');}return tmp;}row = (row && et.isNumber(row) && row > 1) ? row : 0;var len = Math.ceil(data.length / col);len = len > row ? len : row;var sumRows = new Array(len);var sumSpace = 0;//總格數(shù)function initSumRows() {for (var i = 0; i < sumRows.length; i++) {sumRows[i] = [];for (var j = 0; j < col; j++) {sumRows[i].push('<td>*</td>');sumSpace++;}}}function dealColspan(colspan) {if (colspan && et.isObject(colspan)) {for (var i in colspan) {if (i.match(/^\(\d+\,\d+\)$/g)) {var x = parseInt(i.match(/\d+/g)[0]);var y = parseInt(i.match(/\d+/g)[1]);if (sumRows[x] && sumRows[x][y] && et.isNumber(colspan[i])) {sumRows[x][y] = sumRows[y][x].replace('>*', ' colspan="' + colspan[i] + '">*');var loader = (colspan[i] > col ? col : colspan[i]) - 1;for (var j = loader; j > 0; j--) {if (sumRows[x][y + j]) {sumRows[x] = et.deleteArray(sumRows[x], (y + j));sumSpace--;}else {break;}}}}}}}function dealRowspan(rowspan) {if (rowspan && et.isObject(rowspan)) {for (var i in rowspan) {if (i.match(/^\(\d+\,\d+\)$/g)) {var x = parseInt(i.match(/\d+/g)[0]);var y = parseInt(i.match(/\d+/g)[1]);if (sumRows[x][y] && et.isNumber(rowspan[i])) {sumRows[x][y] = sumRows[x][y].replace('>*', ' rowspan="' + rowspan[i] + '">*');var loader = rowspan[i];//loader表示跨度，下面我們需要判斷跨度和目標(biāo)對(duì)象的y坐標(biāo)之和是否大于總行數(shù)，如果大于的話，我們需要根據(jù)大于的具體情況對(duì)行數(shù)進(jìn)行補(bǔ)償if ((x + loader) > sumRows.length) {var len = x + loader - sumRows.length;for (var k = 0; k < len ; k++) {sumRows.push(create());}}for (var j = 1; j < loader; j++) {if (sumRows[x + j][y]) {if (sumRows[x][y].match(/(colspan=\")\d+(\")/g)) {var span = parseInt(sumRows[x][y].match(/(colspan=\")\d+(\")/g)[0].match(/\d+/)[0]);span = span > col ? col : span;for (var k = span; k > 0; k--) {sumRows[x + j] = et.deleteArray(sumRows[x + j], sumRows[x + j].length - 1);sumSpace--;}}else {sumRows[x + j] = et.deleteArray(sumRows[x + j], y);}}else {break;}}}}}}}function expand() {if (sumSpace < data.length) {var addSpace = data.length - sumSpace;var addLine = Math.ceil(addSpace / col);for (var i = 0; i < addLine; i++) {sumRows.push(create());}len = addLine;}}function style(s, index) { return s ? (s[index] ? ' style="' + s[index] + '"' : '') : ""; }function fill() {var TrIndex = 0;var str = '<tr id="EasyTr' + num + '_' + TrIndex + '" class="EasyTr' + num + '"' + style(rowStyle, 0) + '>';var index = 0; //data的index;for (var i = 0; i < sumRows.length; i++) {TrIndex += 1;for (var j = 0; j < sumRows[i].length; j++) {sumRows[i][j] = sumRows[i][j].replace('>*', ' id="EasyTd' + num + '_' + (TrIndex - 1) + '_' + j + '" class="EasyTd' + num + ' EasyColumn' + j + '"' + style(colStyle, j) + '>' + (data[index] ? data[index] : ''));str += sumRows[i][j];index++;}if (i < sumRows.length - 1) {str += '</tr><tr id="EasyTr' + num + '_' + TrIndex + '" class="EasyTr' + num + '"' + style(rowStyle, TrIndex) + '>';}}str += '</tr>';if (et.isIE()) {et.setTableInnerHTMLinIE(table, str);}else {var tbody = document.createElement("tbody");tbody.innerHTML = str;table.appendChild(tbody);}table.lastEmpty = data.length % col ? table.rows[table.rows.length - 1].getElementsByTagName("td")[data.length % col] : null;}function verticalFill() {var index = 0;var TrIndex = 0;table.vertical = true;for (var i = 0; i < col; i++) {for (var j = 0; j < sumRows.length; j++) {if (sumRows[j][i]) {if (sumRows[j][i].match(/(rowspan=\")\d+(\")/g)) {sumRows[j][i] = sumRows[j][i].replace('>*', '>' + (data[index] ? data[index] : ''));var s = parseInt(sumRows[j][i].match(/(rowspan=\")\d+(\")/g)[0].match(/\d+/g)[0]);if (s > 1) {for (var k = 1; k < s ; k++) {j = j + 1;sumRows[j].splice(0, 0, "");}}}else {sumRows[j][i] = sumRows[j][i].replace('>*', '>' + (data[index] ? data[index] : ''));}index++;}}}var str = '<tr id="EasyTr' + num + '_' + TrIndex + '" class="EasyTr' + num + '"' + style(rowStyle, 0) + '>';for (var i = 0; i < sumRows.length; i++) {TrIndex += 1;for (var j = 0; j < sumRows[i].length; j++) {if (sumRows[i][j] != "") {str += sumRows[i][j].replace(sumRows[i][j].match(/>/g)[0], ' id="EasyTd' + (TrIndex - 1) + '_' + j + '" class="EasyTd' + num + ' EasyColumn' + j + '"' + style(colStyle, j) + '>');index++;}}if (i < sumRows.length - 1) {str += '</tr><tr id="EasyTr' + num + '_' + TrIndex + '" class="EasyTr' + num + '"' + style(rowStyle, TrIndex) + '>';}}str += '</tr>';if (et.isIE()) {et.setTableInnerHTMLinIE(table, str);}else {var tbody = document.createElement("tbody");tbody.innerHTML = str;table.appendChild(tbody);}function getLast() {if (row) {for (var i = 0; i < col; i++) {for (var j = 0; j < table.rows.length; j++) {if (table.rows[j].getElementsByTagName("td")[i].innerHTML == "") {table.verticalY = j;table.verticalX = i;return table.rows[j].getElementsByTagName("td")[i];}}}}else {var r = table.rows, l = r.length - 1, aimTop = r[l - 1], aim = r[l];for (var i = l; i > 0; i--) {if (aimTop.lastChild.innerHTML != "") {table.verticalY = i;table.verticalX = col;return aim.lastChild;}else {aim = aimTop;aimTop = r[i - 1];}}}}function getLastSimple() {table.verticalY = 0;table.verticalX = data.length;return table.rows[0].getElementsByTagName("td")[data.length];}table.lastEmpty = data.length == sumSpace ? null : (table.rows.length == 1 ? getLastSimple() : getLast());}initSumRows();dealColspan(colspan);dealRowspan(rowspan);expand();if (vertical) {verticalFill();}else {fill();}}if (et.isObject(o) && (et.isString(o.targetId) || et.isDOM(o.target))) { //主運(yùn)算區(qū)var target = document.getElementById(o.targetId);var table = document.createElement("table");table.className = "EasyTable";function dealRecycle(num) {if (et.tableRecycle.length) {if (et.tableRecycle.length == 1) {var tmp = et.tableRecycle[0];et.tableRecycle = [];return tmp;}else {var tmpArr = [], tmp = et.tableRecycle[0];for (var i = 1; i < et.tableRecycle.length; i++) {tmpArr.push(et.tableRecycle[i]);}et.tableRecycle = tmpArr;return tmp;}}else {return num;}}table.index = dealRecycle(et.tableNum);table.id = "EasyTable" + table.index;var column = o.col || 3;function createEmptyDataGroup(column) {var tmp = [];for (var i = 0; i < column; i++) {tmp.push("");}table.imempty = 1;return tmp;}var data = et.isArray(o.data) ? o.data : createEmptyDataGroup(column);var row = o.row || null; //行數(shù)為可選項(xiàng)，當(dāng)需要應(yīng)用到跨行和跨列的處理而出現(xiàn)問題時(shí)可以用該參數(shù)對(duì)其進(jìn)行修正function dealCRstyle(style) {//CR表示col和rowif (style) {var tmp = [];if (!et.isArray(style)) {style = [style];}for (var i = 0; i < style.length; i++) {if (style[i].match(/^\(\d+\)\[[\s\S]*\]$/g)) {tmp[parseInt(style[i].match(/\(\d+\)/g)[0].slice(1, -1))] = style[i].match(/\[[\s\S]*\]/g)[0].slice(1, -1);}}return tmp;}return null;}var colStyle = dealCRstyle(o.colStyle), rowStyle = dealCRstyle(o.rowStyle);var colspan = o.colspan || null, rowspan = o.rowspan || null;var vertical = o.type == "vertical" ? true : false;if (o.tableStyle) { eval('et.aR(et.sheet,{"#EasyTable' + table.index + '":"' + o.tableStyle + '"})'); }if (o.trStyle) { eval('et.aR(et.sheet,{".EasyTr' + table.index + '":"' + o.trStyle + '"})'); }if (o.tdStyle) { eval('et.aR(et.sheet,{".EasyTd' + table.index + '":"' + o.tdStyle + '"})'); }if (o.deuce) {//該屬性用于決定是否平分全部列寬eval('et.aR(et.sheet,{".EasyTd' + table.index + '":"width:' + parseInt(100 / column) + '%"})');var rulelength = document.all ? et.sheet.rules.length : et.sheet.cssRules.length;//兼容ie8、9的et.sheet.rules.lengthtable.deuce = rulelength - 1;}createTableContent(table, data, column, row, table.index, colspan, rowspan, colStyle, rowStyle, vertical);table.col = o.col || 3;var parent = document.getElementById(o.targetId) || o.target;parent.appendChild(table);function deuce() {if (o.deuce) {et.deleteRule(et.sheet, table.deuce);eval('et.aR(et.sheet,{".EasyTd' + table.index + '":"width:' + parseInt(100 / table.col) + '%"})');var rulelength = document.all ? et.sheet.rules.length : et.sheet.cssRules.length;table.deuce = rulelength - 1;}}function addCol(type, col) {var plus = 0, index = 0;for (var i in col) {for (var j = 0; j < table.rows.length; j++) {var aim = document.getElementById("EasyTd" + table.index + "_" + j + "_" + i);if (aim && et.isNumber(col[i]) && col[i] > 0) {for (var k = 0; k < col[i]; k++) {var newChild = document.createElement("td");newChild.id = type + "Col" + table.index + "_" + (index++);newChild.className = aim.className + " " + type + "Col " + type + "Col" + table.index + "_" + i;if (type == "prepend") {et.insertBefore(aim, newChild);}else {et.insertAfter(aim, newChild);}}}}plus += et.isNumber(col[i]) ? col[i] : 0;}table.col += plus;deuce();}function addRow(type, row) {for (var i in row) {var aim = document.getElementById("EasyTr" + table.index + "_" + i);if (aim && et.isNumber(row[i]) && row[i] > 0) {for (var j = row[i]; j > 0; j--) {var newChild = document.createElement("tr");newChild.className = type + "Row" + table.index + "_" + i + " EasyTr" + table.index;for (var k = 0; k < table.col; k++) {newChild.innerHTML += '<td id="' + type + 'RowTd' + i + '_' + j + '_' + k + '" class="EasyTd' + table.index + ' ' + type + 'Row ' + type + 'Row' + table.index + '_' + i + '"></td>';}if (type == "prepend") {et.insertBefore(aim, newChild);}else {et.insertAfter(aim, newChild);}}}}}function eCR(val, type) {//empty col or rowif (et.isNumber(val)) { val = [val]; }var childs = table.rows, c = type == "col" ? table.col : table.rows.length;for (var i = 0; i < val.length; i++) {var v = val[i] < c ? val[i] : null;if (v != null) {if (type == "col") {for (var j = 0; j < childs.length; j++) {childs[j].getElementsByTagName("td")[v].innerHTML = "";}}else {for (var j = 0; j < childs[v].getElementsByTagName("td").length; j++) {childs[v].getElementsByTagName("td")[j].innerHTML = "";}}}}}function rCR(val, type) {//remove col or rowif (et.isNumber(val)) { val = [val]; }var childs = table.rows, c = type == "col" ? table.col : table.rows.length;val = val.sort().reverse();for (var i = 0; i < val.length; i++) {var v = val[i] < c ? val[i] : null;if (v != null) {if (type == "col") {for (var j = 0; j < childs.length; j++) {childs[j].removeChild(childs[j].getElementsByTagName("td")[v]);}table.col--;}else {childs[v].parentNode.removeChild(childs[v]);}}}deuce();}if (o.prependCol && et.isObject(o.prependCol)) {addCol("prepend", o.prependCol);}if (o.appendCol && et.isObject(o.appendCol)) {addCol("append", o.appendCol);}if (o.prependRow && et.isObject(o.prependRow)) {addRow("prepend", o.prependRow);}if (o.appendRow && et.isObject(o.appendRow)) {addRow("append", o.appendRow);}if (et.isNumber(o.emptyCol) || et.isArray(o.emptyCol)) {eCR(o.emptyCol, "col");}if (et.isNumber(o.emptyRow) || et.isArray(o.emptyRow)) {eCR(o.emptyRow, "row");}if (et.isNumber(o.removeCol) || et.isArray(o.removeCol)) {rCR(o.removeCol, "col");}if (et.isNumber(o.removeRow) || et.isArray(o.removeRow)) {rCR(o.removeRow, "row");}function RS(n, c) { //去除頭尾空格或者指定符號(hào)var c = c || " ";while (n.slice(0, 1) == c) { n = n.slice(1); } while (n.slice(-1) == c) { n = n.slice(0, -1); } return n;}function ICSH(kind, a) {//id,class,style,htmlvar s1 = (kind == "id" ? "id=" : (kind == "class" ? "className+=" : (kind == "style" ? "style.cssText+=" : "innerHTML=")));var s2 = kind == "class" ? '" ' : '"';if (!et.isArray(a)) {a = [a];}for (var i = 0; i < a.length; i++) {if (a[i]) {var aim, index, x, y, content;if (a[i].match(/^\(\d+\)\[[\s\S]*\]$/g)) {index = parseInt(a[i].match(/\(\d+\)/g)[0].slice(1, -1));aim = table.rows[index];content = RS(a[i].match(/\[[\s\S]*\]/g)[0].slice(1, -1));}else if (a[i].match(/^\(\d+\,\d+\)\[[\s\S]*\]$/g)) {index = a[i].match(/\(\d+\,\d+\)/g)[0].slice(1, -1).split(",");x = parseInt(index[0]);y = parseInt(index[1]);if (table.rows[x]) {aim = table.rows[x].getElementsByTagName("td")[y];content = RS(a[i].match(/\[[\s\S]*\]/g)[0].slice(1, -1));}}if (aim) {eval('aim.' + s1 + s2 + content + '"');}}}}function Attr(o) {var tr = table.rows;for (var i in o) {if (!et.isArray(o[i])) {o[i] = [o[i]];}for (var j = 0; j < o[i].length; j++) {if (o[i][j] && (o[i][j].match(/^\(\d+\)\[[\s\S]*\]$/g) || o[i][j].match(/^\(\d+\,\d+\)\[[\s\S]*\]$/g))) {var aim, index, x, y, attr;attr = o[i][j].match(/\[[\s\S]*\]/g)[0].slice(1, -1);if (o[i][j].match(/^\(\d+\)\[[\s\S]*\]$/g)) {index = parseInt(o[i][j].match(/\(\d+\)/g)[0].slice(1, -1));aim = tr[index];}else {index = o[i][j].match(/\(\d+\,\d+\)/g)[0].slice(1, -1).split(",");x = parseInt(index[0]);y = parseInt(index[1]);aim = tr[x].getElementsByTagName("td")[y];}if (aim) {aim.setAttribute(i, attr);}}}}}if (o.id) {ICSH("id", o.id);}if (o.cls) {ICSH("class", o.cls);}if (o.style) {ICSH("style", o.style);}if (o.html) {ICSH("html", o.html);}if (o.attr && et.isObject(o.attr)) {Attr(o.attr);}if (!et.tableRecycle.length) {et.tableNum++;}table.row = table.rows.length;if (o.callback) {o.callback(table, table.id);}et['table' + table.index] = table;}},addTr: function (o) {if (et.isDOM(o.target) && o.target.col != undefined && o.target.row != undefined) {var table = o.target;table.row++;function createEmptyDataGroup(column, data) {var tmp = [];tmp.push(data ? data : "");for (var i = 1; i < column; i++) {tmp.push("");}return tmp;}function deal(d) {if (d.length < table.col) {for (var i = 0; i <= table.col - d.length; i++) {d.push("");}}return d;}var data = et.isArray(o.data) ? deal(o.data) : createEmptyDataGroup(table.col, o.data);var tr, tds = [];if (table.imempty) {for (var i = 0; i < table.rows[0].getElementsByTagName("td").length; i++) {table.rows[0].getElementsByTagName("td")[i].innerHTML = data[i];tds.push(table.rows[0].getElementsByTagName("td")[i]);}table.imempty = 0;tr = table.rows[0];}else {tr = document.createElement("tr");tr.className = "EasyTr" + table.index + " EasyTr";tr.id = "EasyTr" + table.index + "_" + table.rows.length;for (var i = 0; i < table.col; i++) {var td = document.createElement("td");td.id = "EasyTd" + table.rows.length + "_" + i;td.className = "EasyTd" + table.index + " EasyColumn" + i;td.innerHTML = data[i];tds.push(td);tr.appendChild(td);}var parent = table.getElementsByTagName("tbody") ? table.getElementsByTagName("tbody")[0] : table;parent.appendChild(tr);}function IdOrClassOrStyle(kind, o) {var s1 = (kind == "id" ? "id=" : (kind == "class" ? "className+=" : "style.cssText+="));var s2 = kind == "class" ? '" ' : '"';if (et.isArray(o)) {for (var i = 0; i < tds.length; i++) {if (o[i]) {eval('tds[i].' + s1 + s2 + o[i] + '"');}}}else {eval('tr.' + s1 + s2 + o + '"');}}if (o.id) {//不建議使用id方法，因?yàn)闀?huì)覆蓋掉原來的id，可能會(huì)影響自帶的一些屬性。IdOrClassOrStyle("id", o.id);}if (o.cls) {IdOrClassOrStyle("class", o.cls);}if (o.style) {IdOrClassOrStyle("style", o.style);}if (o.attr) {if (et.isObject(o.attr)) {for (var i in o.attr) {if (et.isArray(o.attr[i])) {for (var j = 0; j < o.attr[i].length; j++) {if (tds[j] && o.attr[i][j]) {tds[j].setAttribute(i, o.attr[i][j]);}}}else if (o.attr[i]) {tr.setAttribute(i, o.attr[i]);}}}}if (o.toggleStyle) {if (table.trToggleStyle == undefined) {table.trToggleStyle = true;}if (table.trToggleStyle) {table.trToggleStyle = false;tr.style.cssText += o.toggleStyle;}else {table.trToggleStyle = true;}}if (o.toggleAttr) {if (table.trToggleAttr == undefined) {table.trToggleAttr = true;}if (table.trToggleAttr) {table.trToggleAttr = false;if (et.isObject(o.toggleAttr)) {for (var i in o.toggleAttr) {tr.setAttribute(i, o.toggleAttr[i]);}}}else {table.trToggleAttr = true;}}if (o.callback) {o.callback(tr, tds);}}},addTd: function (o) {if (et.isDOM(o.target) && o.target.col != undefined && o.target.row != undefined) {var table = o.target, aimTd;function getNextSibling(startBrother) {endBrother = startBrother.nextSibling;if (!endBrother) { return null; }while (endBrother.nodeType != 1) {endBrother = endBrother.nextSibling;}return endBrother;}if (table.lastEmpty) {aimTd = table.lastEmpty;if (table.vertical) {if (table.rows[table.verticalY + 1] && table.rows[table.verticalY + 1].getElementsByTagName("td")[table.verticalX]) {table.lastEmpty = table.rows[table.verticalY + 1].getElementsByTagName("td")[table.verticalX];table.verticalY += 1;}else if (table.rows[0].getElementsByTagName("td")[table.verticalX + 1]) {table.lastEmpty = table.rows[0].getElementsByTagName("td")[table.verticalX + 1];table.verticalX += 1;table.verticalY = 0;}else {table.lastEmpty = null;table.vertical = null;}}else {table.lastEmpty = getNextSibling(table.lastEmpty);}}else {table.vertical = null;var tr;if (table.imempty) {tr = table.rows[0];table.imempty = 0;}tr = document.createElement("tr");tr.className = "EasyTr" + table.index;tr.id = "EasyTr" + table.index + "_" + table.rows.length;table.row++;for (var i = 0; i < table.col; i++) {var td = document.createElement("td");td.id = "EasyTd" + table.rows.length + "_" + i;td.className = "EasyTd" + table.index + " EasyColumn" + i + " EasyTd";tr.appendChild(td);}aimTd = tr.getElementsByTagName("td")[0];table.lastEmpty = tr.getElementsByTagName("td")[1];//如果沒有那就是undefined，那么下次又會(huì)再創(chuàng)建一行新的tret.insertAfter(table.rows[table.rows.length - 1], tr);}if (o.data || o.data == 0) {aimTd.innerHTML = o.data;}if (o.style) {aimTd.style.cssText = o.style;}if (o.id) {//一般不建議使用該方法，可能會(huì)干擾EasyTable的一些屬性。aimTd.id = o.id;}if (o.cls) {aimTd.className += " " + o.cls;}if (et.isObject(o.attr)) {for (var i in o.attr) {aimTd.setAttribute(i, o.attr[i]);}}if (o.toggleStyle) {if (table.tdToggleStyle == undefined) {table.tdToggleStyle = true;}if (table.tdToggleStyle) {table.tdToggleStyle = false;aimTd.style.cssText += o.toggleStyle;}else {table.tdToggleStyle = true;}}if (o.toggleAttr) {if (table.tdToggleAttr == undefined) {table.tdToggleAttr = true;}if (table.tdToggleAttr) {table.tdToggleAttr = false;if (et.isObject(o.toggleAttr)) {for (var i in o.toggleAttr) {aimTd.setAttribute(i, o.toggleAttr[i]);}}}else {table.tdToggleAttr = true;}}if (o.callback) {o.callback(aimTd);}}},destroy: function () {var arg = arguments;if (arg.length) {for (var i = 0; i < arg.length; i++) {if (et.isDOM(arg[i])) {if (et.isNumber(arg[i].index) && et['table' + arg[i].index]) {//et['table' + arg[i].index] = undefined;delete et['table' + arg[i].index];et.tableRecycle.push(arg[i].index);}arg[i].parentNode.removeChild(arg[i]);}}}else {for (var i = 0; i < et.tableNum; i++) {if (et['table' + i]) {et['table' + i].parentNode.removeChild(et['table' + i]);//et['table' + i] = undefined;delete et['table' + i];}}et.tableNum = 0;et.tableRecycle = [];}},hook: function (table, aim, callback) {if (et.isDOM(table) && table.col != undefined && table.row != undefined) {var target;if (et.isNumber(aim)) {target = table.rows[aim];}else if (et.isString(aim)) {if (aim.match(/^\(?\d+\)?$/g)) {target = table.rows[parseInt(aim.match(/\d+/g)[0])];}else if (aim.match(/^\(?\d+\,\d+\)?$/g)) {var i = aim.match(/\d+\,\d+/g)[0].split(",");var x = parseInt(i[0]), y = parseInt(i[1]);target = table.rows[x].getElementsByTagName("td")[y];}}if (target) {if (callback) {callback(target);}return target;}}},clone: function (table, aim, type) {var target = et.hook(table, aim), o = type;if (target) {if (!target.cloned) { target.cloned = 1; }var c = target.cloneNode(true), rd = c.tagName.toLowerCase();//rd => tr or tdc.id = target.id + "_clone" + target.cloned; target.cloned++;function ICSH(kind, o) {var s1 = (kind == "id" ? "id=" : (kind == "class" ? "className+=" : (kind == "style" ? "style.cssText+=" : "innerHTML=")));var s2 = kind == "class" ? '" ' : '"';if (et.isArray(o) && rd == "tr") {var cTd = c.getElementsByTagName("td");if (cTd.length) {for (var i = 0; i < cTd.length; i++) {if (o[i] && cTd[i]) {eval('cTd[i].' + s1 + s2 + o[i] + '"');}}}}else {eval('c.' + s1 + s2 + o + '"');}}function Attr(o) {if (et.isObject(o)) {for (var i in o) {if (et.isArray(o[i]) && c.tagName.toLowerCase() == "tr") {var cTd = c.getElementsByTagName("td");for (var j = 0; j < o[i].length; j++) {if (cTd[j] && o[i][j]) {cTd[j].setAttribute(i, o[i][j]);}}}else {c.setAttribute(i, o[i]);}}}}if (et.isObject(o)) {if (o.id) { ICSH("id", o.id); }if (o.cls) { ICSH("class", o.cls); }if (o.style) { ICSH("style", o.style); }if (o.html) { ICSH("html", o.html); }if (o.attr) { Attr(o.attr); }if (o.parent) {if (et.isDOM(o.parent)) {if (o.parent.tagName.toLowerCase() == "table" && o.parent.getElementsByTagName("tbody")) {o.parent.getElementsByTagName("tbody")[0].appendChild(c);}else {o.parent.appendChild(c);}}}return c;}else if (et.isString(o)) {function d(n) { //將形如background-color的字符變成backgroundColorif (n.indexOf("-") > 0) {var t = n.split("-"), tmp = t[0];for (var i = 1; i < t.length; i++) {tmp += t[i].slice(0, 1).toUpperCase() + t[i].slice(1);}return tmp;}return n;}if (o == "html") { return c.innerHTML; }else if (o == "id") { return target.id; }else if (o == "class") { return c.className; }else if (o == "style") { return c.style.cssText; }else if (o.match(/^style\[[\s\S]*\]$/g)) {var s = d(o.match(/\[[\s\S]*\]/g)[0].slice(1, -1));if (eval('c.style.' + s)) { return eval('c.style.' + s); }}else if (o.match(/^attr\[[\s\S]*\]$/g)) {var s = o.match(/\[[\s\S]*\]/g)[0].slice(1, -1);if (c.getAttribute(s)) { return c.getAttribute(s); }}}else {return c;}}},addEvent: function (obj, event, handler) {if (window.attachEvent) {obj.attachEvent("on" + event, handler);} else if (window.addEventListener) {obj.addEventListener(event, handler, false);}} } var EasyTable = et;最后是給出下載鏈接，已經(jīng)打包好的了，包括demo.html，EasyTable.js和EasyTable.min.js。
http://download.csdn.net/detail/sinolzeng/8637245
總結(jié)
以上是生活随笔為你收集整理的EasyTable2.1 功能更加强大，bug全面修复的html table插件！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 将格式化的日期字符串转换为Unix时间戳
- 下一篇： Javascript 严格模式详解