[JS] 表格新增移除整欄

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

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

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

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

<table id="compare_table" class="table table-bordered">
<thead>
<tr>
    <th class="head"> </th>
    <th id="compare_table_header" class="center" colspan="3">商品比較表</th>
</tr>
</thead>
<tbody>
<tr class="odd" data-type="title">
    <th class="head center">商品名稱</th>
    <td class="center">title1</td>
    <td class="center">title2</td>
</tr>
<tr class="even" data-type="thumb">
    <th class="head center">縮圖</th>
    <td class="center"><img src="http://fakeimg.pl/80/" class="img-polaroid" /><br /><button class="remove_compare btn btn-mini" type="button">Remove Data</button></td>
    <td class="center"><img src="http://fakeimg.pl/80/" class="img-polaroid"  /><br /><button class="remove_compare btn btn-mini" type="button">Remove Data</button></td>
</tr>
</tbody>
</table>
<button class="add_compare btn" type="button">Add Data</button>

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

接著是 javascript

var $compareTable = $('#compare_table')
var $compareTableHeader = $('#compare_table_header')
var oCompareTable = {};
$compareTable.find('tbody:first > tr').each(function(i,n){
    oCompareTable[$(n).data('type')] = $(n);
})
var data = {'title':'test','thumb':'http://fakeimg.pl/80/'}
$compareTable.bind('insert_column',function(e,data){
    $.each(oCompareTable,function(name,n){
        var cell = $('<td />')
        var value = typeof(data[name]) == 'undefined' ? '--':data[name];
                    if( name == 'thumb' ){
                       value = '<img src="'+value+'" class="img-polaroid" /><br><button class="remove_compare btn btn-mini" type="button">Remove Data</button>'
                    }
        cell.html(value)
        oCompareTable[name].append(cell)
    })
    $compareTableHeader.attr('colspan', $compareTable.find('tbody > tr:first > td').size() )
})
$compareTable.bind('remove_column',function(e,colindex){
    $compareTable.find('td:nth-child('+(colindex+1)+')').remove()
})
$compareTable.on('click','.remove_compare',function(){
    var cell = $(this).parents('td:first');
    var index  = cell.parent().children().index(cell);
    $compareTable.trigger('remove_column',index);
})
$('.add_compare').click(function(){
    $compareTable.trigger('insert_column',data);
})

這部分呢就是主要核心的地方，比較重要的重點是 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 設計了。