[JS] 表格新增移除整欄

今天在寫案子的時候,剛好要寫一個類似比較的功能,找了大半天沒找到類似的套件可以應用

所以自己就大概寫了一個 insert table column and remove table column 的Jquery 程式

一次新增一欄資料,以及移除一欄資料

http://jsfiddle.net/mesak/6mSe7

首先需要 table 一個 重點是 每一列 需要帶上一個 data-type="name" ,然後需要增加一個 移除整列的按鈕,定義為 class=remove_compare 的按鈕

接著是 javascript

這部分呢就是主要核心的地方,比較重要的重點是 oCompareTable 是一個帶名字的陣列物件,根據每一個 tr 帶入的 type 來命名 dom 物件,就當作是變數先記住每個 tr的位置,避免多次搜尋。

再來是 增加的 function  $compareTable.bind(‘insert_column’,function(e,data) 把事件綁在表格上,方便使用 jquery 內建的觸發來給值呼叫。然後再寫一個 remove_column 的事件,一樣綁定在表格上。

接著是觸發,移除這個觸發事件,因為是動態新增的物件,所以把事件綁定在 表格上,利用 jquery on 的事件來判定 .remove_column 的觸發,接著把整欄移除,新增這個事件,因為我使用的是固定的 data,也可以換成 ajax post get 類型的模式,把整個 data 給新增,這部分就要看開發者的ui 設計了。

 

我是米薩克,想了解更多可以點選  關於我