當前位置：
首頁 >
EasyTable2.1 功能更加强大，bug全面修复的html table插件！
發布時間：2025/4/16
45
豆豆
生活随笔
收集整理的這篇文章主要介紹了
EasyTable2.1 功能更加强大，bug全面修复的html table插件！
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2015年5月25日更新，目前et已經升級到2.1的版本了，具體請看鏈接：http://download.csdn.net/detail/sinolzeng/8735873
我已經將所有內容做成demo.html，并附帶了et的原版和壓縮版。使用時將et的壓縮版引入頁面即可，不需要依賴于jquery。
最近整理和修復了1.0的全部bug，并且給2.0添加了不少新功能。由于語法上有些修正，所以我重新寫了一個非常詳細的demo.html在文檔里面，這里直接貼出（由于添加了新的功能，et的2.0的壓縮版本已經達到了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">/*** 解除注釋即可查看運行情況，建議使用火狐瀏覽器的firebug一邊調試一邊查看，注意每一次只查看一條，一次性全部查看會導致et.table0錯誤。 ***//*插件支持瀏覽器：所有現代瀏覽器，ie8、9。但需要注意，ie瀏覽器的語法非常嚴(qi)謹(pa)，需要特別小心，另外ie有時候不支持margin:0 auto等類型的語法糖，直接使用會導致錯誤。同時ie不能在object或數組中存在多余的逗號，所有方法結尾都要加上分號。*//***** 友情提醒：珍愛生命，遠離IE！！ *****///1.用EasyTable插件創建一個table表格。///我們需要利用EasyTable的draw方法，并傳入一個Object，該Object的targetId屬性綁定一個在body中的對象的id，我們的table就會在此id下創建。//EasyTable.draw({ targetId:"target" });//2.如果不采用targetId屬性直接檢索頁面元素的話，也可以用target屬性直接傳入一個頁面元素。//EasyTable.draw({// target: document.getElementById("target")//});////如果使用jquery則是：//EasyTable.draw({// target: $("#target")[0]//});//3.但請注意，如果以上兩個屬性同時出現，那么只會使用targetId屬性的綁定。//EasyTable.draw({// target: document.getElementById("target"),// targetId: "target2"//});//4.由于EasyTable.draw()的寫法略顯羅嗦，所以用戶可以直接用et.draw()代替，另外，也可以用：var 你設定的名字 = et;來自定義EasyTable的名字。//et.draw({ targetId: "target" });//var myName = et;//myName.draw({ targetId: "target2" });//5.EasyTable.draw()（以下簡稱et.draw()）傳入數據非常簡單，只需要在data屬性里傳入一個數組即可，默認情況下et是三列，數據將自動按照每行三個依次排列下去，多余地方由空的td補全。//et.draw({// targetId: "target",// data: [1, 2, 3, 4, 5]//});//6.用戶可以自定義列數，使用col屬性：(col屬性并不是必須的，但是多數情況下我們會自定義列數。)//et.draw({// targetId: "target",// data: [1, 2, 3, 4, 5],// col:2//});//7.用戶可以自定義行數，使用row屬性：(但注意，如果data的數組長度大于用戶給定的行列數的乘積，那么et會自動生成新的tr進行補全，而不是拋棄放不下的數據。row屬性并不是必須的，大部分情況下都不需要用到該屬性。)//et.draw({// targetId: "target",// data: [1, 2, 3, 4, 5, 6, 7, 8, 9],// col: 4,// row: 2//});//8.用戶可以設定tableStyle屬性、trStyle屬性和tdStyle屬性來設定你的table、tr和td的相關style。即使用戶不進行任何設置，默認情況下，table也會加上兩個style：width:100%和border-collapse:collapse。通常情況下，trStyle和tdStyle只需要用一個就夠了。//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時，經常需要處理的情況就是列之間的寬度的平分，這里我們可以使用deuce屬性，只需要設置為true。那么table就會自動幫你設置列的寬度平分。//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都有一個共同的class：EasyTable。同時第一個的id為EasyTable0，第二個是EasyTable1，以此類推。同時也會生成一個對應的et屬性。比如，et.draw({ ..... }); 使用et.table0 等價于 document.getElementById("EasyTable0")。//11.每次生成draw方法，如果使用普通方法清除掉運行過程中的table的話，該序列號并不會被回收。即：假設你清除了id為EasyTable1的table后再執行et.draw()方法，下次生成的是id為EasyTable2。為了解決這個問題，可以使用destroy()方法。et.destroy(et.table1);那么下次你再使用draw方法時，得到的新的table的id還是EasyTable1。這樣的話et.table1屬性訪問到的就是你的新table，而不會變成undefined。//destroy()方法允許傳入多個table，一次性銷毀多個table并回收多個序列號。如：et.destroy(et.table0,document.getElementById("EasyTable1"));//destroy()方法也可以不傳入任何參數。那么將會銷毀所有的table。請慎用：et.destroy();//12.et.draw()可以為指定的格子進行colspan和rowspan的設置，并且可以一次性設置多個。（坐標的第一個表示某一行tr，從0開始數起，坐標的第二個值表示該tr中的某一個td，也是從0開始數起。"(1,0)"即表示第二行的第一個。需要注意的是，這兩個屬性不能與下面的添加行、列等功能配合，并且該功能容易造成數據的難以理解，不建議大規模使用。）具體格式如下：//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()擁有豎向排列數據的功能。使用type屬性并設置為vertical即可。但是該功能對于后面要介紹到的addTd功能有一個小沖突。后面會詳述。//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()可以對原有的table進行擴展，即：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 可以對指定的列、行添加style。如果兩者同時存在于一個td上，則col覆蓋row。格式為：(index)[style內容]//注意：rowStyle是直接設置在tr上的style，如果使用了tdStyle，那么rowStyle可能會被覆蓋。后面可以用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。作用是清空指定行、列中的數據。//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,//清除第二列的數據// emptyRow: [1, 2],//清除第二行和第三行的數據，這兩個方法都可以傳入一個數字或者一個數字數組。// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//18. removeCol 和 removeRow 方法與上面的用法類似，作用是徹底刪除指定的行、列，而不僅僅是清空其中的數據。//et.draw({// targetId: "target",// tableStyle: "width:90%;margin:0 auto;text-align:center;margin-left:5%",//在ie瀏覽器中，由于對margin:0 auto的支持性欠佳，所以最好使用margin-left:5%令其居中。// tdStyle: "background-color:deepskyblue;border:1px solid #7f7f7f;height:40px;",// deuce: true,// removeCol: 1,//刪除第二列// removeRow: [1, 2],//刪除第二行和第三行，這兩個方法都可以傳入一個數字或者一個數字數組。// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//19.et.draw()可以使用id屬性設置某一行tr的id，也可以設置某一個td的id。但請慎用該方法，因為et有些style是通過id實現的，如非必要，盡可能不要修改tr或者td默認的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，可以傳入一個字符串，也可以傳入一個數組，20中的其他類型也一樣。// id:["(0,0)[xiugai1]","(0,1)[xiugai2]"],//(0,0)表示第一行第一個td，(0,1)表示第一行第二個td，以此類推。// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//20.et中也可以使用cls屬性修改class、style屬性修改style、html屬性修改內部文字，用法和id一致。//et中的id、style、class、html等方法都不推薦經常或者大量地使用。它們的作用僅僅是處理項目中臨時性或突然性出現的對局部更改的需求。//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不同，用該方法創建的class并不會覆蓋原來的class，而是增加進去。因為一個元素可以有多個class。另外由于“class”是js中的關鍵詞，在部分瀏覽器中直接寫為一個object的屬性會報錯。為了兼容性的考慮，所以將class寫成cls。// style: "(1,0)[background-color:red]",//style方法和class方法一樣，如果目標對象已有一定的style，則不覆蓋原有的style，而是采取追加的方式插入新的style。// html: "(2,0)[<td></td><td></td><td></td><td></td>]",//特別注意：請盡量不要直接修改tr的innerHTML。在ie瀏覽器中，tr的innerHTML是只讀的，無法修改（直接修改將導致錯誤）。如果要修改，請修改td的html。// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//21.et.draw()中的attr屬性可以為元素添加attr，通常用于對元素添加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']"] },//注意傳入的是對象，不是數組格式。要同時作用于多個則在一個對象屬性中傳入數組。并且在ie瀏覽器中，以attr屬性的形式綁定的事件都是無法執行的，所以如果需要考慮ie瀏覽器的話，需要用我們后面介紹到的addEvent方法。// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],// col: 4//});//22.et.draw()中的最后一個屬性，callback，回調操作，第一個參數是table元素本身，第二個元素是table的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,// 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));// }//});//上面已經介紹完了draw()方法，在實際應用中，動態生成表格通常是需要根據網頁請求到的數據動態添加tr和td。因此，下面我們將介紹addTr()和addTd()方法。//23.et.addTr()方法的target必須是一個table，data是數組，內容是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:["新增內容1","新增內容2","新增內容3"]//});//24.et.addTr()中也支持id、class、style、attr方法，根據傳入的是字符串或者數組來判斷作用于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也會默認生成一行空的tr。// col: 3,// callback: function (table) {// tb = table;// }//});//et.addTr({// target: tb,//這里我們介紹另一種方法獲取目標table，就是用一個變量在上面的callback中將table記錄下來。// data: ["新增內容1", "新增內容2", "新增內容3"],// id: "xiugai",//作用于tr// cls: "newClass",//作用于tr// style: "font-family:隸書",//作用于tr// attr: { "onclick": "alert(1)" }//老慣例，這種onclick的事件設置方法在ie瀏覽器是無效的。//});//et.addTr({// target: tb,// data: ["新增內容4", "新增內容5", "新增內容6"],// id: ["xiugai1", "xiugai2", "xiugai3"],//作用于三個td。// cls: ["new1", "", "new3"],//作用于第一個td和第三個td，第二個td相當于沒有添加新的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'"] }//作用于第一個和第二個td。//});//25.addTr()中有toggleStyle和toggleAttr方法，作用于tr。意思是在生成的tr中，如果第一個tr得到了style/attr，那么下一個就不會得到該style/attr，而再下一個又會得到。以此類推。常見的例子就是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) + "行-第一個", "第" + (i + 1) + "行-第二個", "第" + (i + 1) + "行-第三個"],// toggleStyle: "background-color:#d9d9d9;",// toggleAttr: { "onclick": "alert(" + (i + 1) + ")" }//在ie瀏覽器無法觀察到其點擊事件。// });// }// }//});//26.上面的例子中，toggleStyle和toggleAttr中都是從第一行（也就是第一個tr）開始的，如果想從第二個（即偶數行開始），需要進行以下設置：//在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) + "行-第一個", "第" + (i + 1) + "行-第二個", "第" + (i + 1) + "行-第三個"],// toggleStyle: "background-color:#d9d9d9;",// toggleAttr: { "onclick": "alert(" + (i + 1) + ")" }//在ie瀏覽器無法觀察到其點擊事件。// });// }// }//});//27.addTr()方法也有callback。第一個參數是tr自己，第二個參數是它以下的td的數組集合，請注意是數組。//et.draw({// targetId: "target",// tdStyle: "border:1px solid black;height:30px;text-align:center;"//沒有設置col（列數）時則col為3。//});//et.addTr({// target: et.table0,// callback: function (tr, tds) {// tr.style.backgroundColor = "green";// var arr = ["測試1", "測試2", "測試3"];// for (var i = 0; i < tds.length; i++) {// tds[i].innerHTML = arr[i];// tds[i].style.color = "white";// }// }//});//28.addTd()方法與addTr()方法非常類似，但需要注意，如果用戶創建的table中存在空白格，則addTd()方法會自動將內容追加到空白格中。但這些空白格對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,// //請通過注釋和解除注釋下面的callback來查看效果。// callback: function (table) {// for (var i = 0; i < 6; i++) {// et.addTd({// target: table,// data: "新增內容" + (i + 1),//由于每次只插入一個td，因此插入的data只能是一個字符串，而不能是數組。// 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將從第二個開始，和上面的tr的用法是一樣的。只是將tr改成了td。// for (var i = 0; i < 6; i++) {// et.addTd({// target: table,// data: "新增內容" + (i + 1),// style: "background-color:yellow;",// toggleStyle: "background-color:deepskyblue;",//注意，在ie瀏覽器中，如果一個dom對象的style里同時擁有兩個相同的設置，（比如都是background-color），那么ie會同時刪除兩個，而不是保留第二個！也就是說，這樣做的結果是兩個style屬性一起消失！如果用戶想要兼容垃圾到不能再垃圾的ie瀏覽器，需要在for循環中設置style如下：// //style:"background-color:"+( i%2 == 0 ? "yellow" : "deepskyblue" ),// toggleAttr: { "onclick": "alert(" + (i + 1) + ")" },// callback: function (td) {// td.style.fontFamily = '隸書';// }// });// }// }//});//30.當table的type為vertical時，如果addTd()方法填滿了指定格子數（也就是行與列的乘積），則又會變成橫向排列了，示例如下：//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;"// });// }// }//});//在瀏覽器中查看會發現，超過35的36、37、38、39自動以橫向的形式排列在最下方的一行上。造成這種現象的原因是et是以col乘以row的格子進行數據排列的，當格子不夠時只能以橫向并入。為了解決這個問題，最好是在運行前先通過其他方法判斷所需的行數和列數，然后再設置好行列數，然后再執行draw({type:"vertical"});//31.上面已經介紹完了et中最重要的三個方法：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()方法傳入三個變量，第一個必填，是目標table，第二個必填，是目標的tr或者td，例：(0)表示第一個tr，(1,1)表示第二個tr的第二個td。第三個參數是回調函數，選填，如果不填，則hook直接返回獲取到的dom對象，如果填入，則在callback中能使用該dom作為參數。//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()方法用于對指定的對象添加事件。通常與hook()方法配合使用。addEvent()方法需要傳入三個參數，第一是dom對象，第二是事件類型，如click等（注意不要傳入on字段），第三個參數是執行事件的內容，傳入一個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()方法用于對指定的對象進行克隆，可以復制對象本身、對象的各種屬性，以及對象重生等三種功能。實際上clone()是hook()方法的升級和封裝。第一個參數和第二個參數同hook，第三個參數下面詳述：//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)]" }//});//如果只傳入兩個參數，則返回指定對象的一個復制體，這里我們以tr為例，當然，也是可以復制td的。//var tr = et.clone(et.table0, "(0)");//et.table0.getElementsByTagName('tbody')[0].appendChild(tr);如果有傳入第三個參數，并且第三個參數為字符串，則返回被指定對象的相關屬性，這里以document.write()寫在屏幕上給用戶觀看：//document.write("被克隆對象的是：table中的第一行tr的第一個td" + "<br>");//document.write("被克隆對象的id是：" + et.clone(et.table0, "(0,0)", "id") + "<br>");//document.write("被克隆對象的class是：" + et.clone(et.table0, "(0,0)", "class") + "<br>");//document.write("被克隆對象的innerHTML是：" + et.clone(et.table0, "(0,0)", "html") + "<br>");//document.write("被克隆對象的style是：" + et.clone(et.table0, "(0,0)", "style") + "<br>");//document.write("被克隆對象的style中的color是：" + et.clone(et.table0, "(0,0)", "style[color]") + "<br>");//document.write("被克隆對象的attr中的onclick是：" + et.clone(et.table0, "(0,0)", "attr[onclick]") + "<br>");//如果第三個參數為object，則是對克隆體進行設置：//et.clone(et.table0, "(1)", {// id: "xiugai",//傳入id、cls、style、html、attr等，如果是 非數組 則傳給tr，如果是 數組 則傳給td，當然，如果捕獲的是td，則只能傳入 非數組。// 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//這里是設置克隆體的將會append到哪一個父元素下。//});//34.上面已經介紹完了EasyTable的全部主要內容。在et中還存在一些內部使用的方法，它們也可以作為外部方法使用，下面將順便介紹：//et.isArray(param);//判斷參數是不是數組//et.isDOM(param);//判斷參數是不是dom頁面元素//et.isString(param);//判斷參數是不是字符串//et.isNumber(param);//判斷參數是不是數字//et.isObject(param);//判斷參數是不是對象//et.isIE();//不需要傳參，判斷當前瀏覽器是不是ie瀏覽器。//35.刪除數組中的某個參數：//et.deleteArray(array,index);//使用示例：var arr = [1,2,3]; arr = et.deleteArray(arr,0); console.log(arr); //將會得到[2,3];//36.前置插入和后置插入，作用是在元素的前面插入一個元素（同級），或在其后面插入一個元素（同級）//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中進行rules條目的操作：//使用示例：//var style = document.createElement("style");//style.type = "text/css";//document.getElementsByTagName("head")[0].appendChild(style);最后一個變量表示插入的位置，因為我們的stylesheet表格是新建的，所以還為空，就只能插入在第0 index的位置上。//var sheet = document.styleSheets[document.styleSheets.length - 1];//et.addRule(sheet, "#target", "background-color:yellow;width:100%;height:50px;", 0);為了讓用戶看到效果，我在下面寫了一個簡單的計時器，1秒后執行deleteRule()方法，就可以清除掉指定的樣式。//var timer = setTimeout(function () {// et.deleteRule(sheet, 0);// clearTimeout(timer);//},1000);//38.注意：在使用EasyTable時不要修改table、tablenum、tableRecycle、init、inited等屬性，否則EasyTable將會運行錯誤。 </script> </html>下面是EasyTable2.0的源碼，提供給大家研究和學習： // EasyTable.js 純js插件，創建時間：2015.02.13 當前版本：2015.04.27 //備注：該插件雖然不需要jquery驅動，但配合jquery使用會更加高效。/* 2015.2.17* 由于ie瀏覽器中對tr.cells屬性不兼容，所以新版本中的cells查詢全部改為getElementsByTagName("td");*/ /* 2015.4.23* 處理 bug：在EasyTr和EasyTd中增加這兩個名字的class，現在可以批量刪除新添加的內容了。* 處理 bug：將EasyTable.tablenum在draw方法中全部替換為table.index。** 添加內容：添加了destroy方法，現在可以回收EasyTable.tablenum的序列號了，媽媽再也不用擔心我的序列號爆掉了！* 回收的時候請使用EasyTable.destroy(你的table);** 添加內容：添加了var et = EasyTable。現在在使用時可以用et簡寫代替EasyTable了。*/ /* 2015.4.24* 添加內容：在draw主方法的里面修改了id、class和style等方法，并將tr和td的方法直接合并，根據索引是(x)還是(x,y)格式來判斷是tr還是td。* 添加內容：在EasyTr和EasyTd中增加id、class 現在可以在添加Tr和Td的時候順便生成id和class了，但是請慎用id功能。** 添加內容：添加了hook方法，該方法可以捕獲一個table中的某一個tr或某一個指定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使用。** 添加內容：添加了EasyTable.table+index對象屬性自動生成，以后獲取table只需要EasyTable.table+index了。* 使用示例：EasyTable.draw({targetId;"something",col:3,data:[1,2,3]});* EasyTable.table0.style.backgroundColor = "red";* //如果進行清除：* EasyTable.destroy(et.table0);* //下次重建table時，還是用index 0 進行訪問：* EasyTable.draw({targetId;"somethingagain",col:3,data:[4,5,6]});* EasyTable.table0.style.backgroundColor = "blue";** 修改內容：更新destroy方法，可以直接放入自定義的table，也可以放入一個或多個et.table+index,如果destroy()方法中的參數為空，就會清除掉所有EasyTable，慎用。* 修改內容：原本的draw方法中的trAttr是按順序的，現在可以按照序列號進行檢索了。* 修改內容：原本的draw方法中的tdAttr的序列號是從1開始的，現在改為從0開始，并且由原來的 列、行檢索 改為：行、列檢索。*/ /* 2015.4.25* 修改內容：將colspan和rowspan改為和上面一樣的行、列（index從0開始）的檢索* 處理 bug：將draw和addTr中的style.cssText后面的 = 改為 += ，這樣就可以避免樣式被覆蓋的問題。* 修改內容：將colStyle和rowStyle改為和style的樣式一致了。* 修改內容：修改destroy方法，現在可以一次性傳入多個table，一次性銷毀并回收序列號。* 添加內容：添加clone方法，現在可以克隆任意的tr或者td了。實際上clone是destroy的延伸。* 添加內容：添加draw方法中的target屬性，現在除了targetId之外可以將table直接生成于指定對象的下方了。* 修改內容：將插件中的主方法里面的全部EasyTable字樣換成et。最后的var et = EasyTable 改成 var EasyTable = et;這樣做的目的是在min版本中盡可能地減少文件字符量。* /* 2015.4.27* 修改內容：將所有以outerHTML=""的形式清除dom元素的語句全部使用removeChild代替。原因是在ie瀏覽器中，table、tr和td元素的outerHTML是只讀的，無法對其進行操作。* 添加內容：添加addEvent方法。* 處理bug ：將addTr中直接插入的父對象由table改為tbody，這樣就可以兼容ie瀏覽器了。* 處理bug ：修復addTd中當type為vertical時跳過總格數就會出現異常的bug。* 修改內容：將draw() addTr() 和 clone()中的attr方法的格式進行統一化。* 添加內容：在addTr中添加callback(tr,tds)，其中tr為tr元素，tds為td的元素數組集合。*/ /** 提 示：EasyTable中的addRule、deleteRule、isIE、insertBefore、insertAfter、isDOM、isObject、isString、isNumber、isArray、deleteArray方法都可以隨時調用。* 注 意：在使用EasyTable時不要修改table、tablenum、tableRecycle、init、inited等屬性，否則EasyTable將會運行錯誤。*/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;//總格數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表示跨度，下面我們需要判斷跨度和目標對象的y坐標之和是否大于總行數，如果大于的話，我們需要根據大于的具體情況對行數進行補償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))) { //主運算區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; //行數為可選項，當需要應用到跨行和跨列的處理而出現問題時可以用該參數對其進行修正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) { //去除頭尾空格或者指定符號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方法，因為會覆蓋掉原來的id，可能會影響自帶的一些屬性。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，那么下次又會再創建一行新的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) {//一般不建議使用該方法，可能會干擾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;最后是給出下載鏈接，已經打包好的了，包括demo.html，EasyTable.js和EasyTable.min.js。
http://download.csdn.net/detail/sinolzeng/8637245
總結
以上是生活随笔為你收集整理的EasyTable2.1 功能更加强大，bug全面修复的html table插件！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 将格式化的日期字符串转换为Unix时间戳
- 下一篇： 性能更好的js动画实现方式——reque