<table id="compare_table" class="outer">
<thead>
<tr>
<th class="head">&nbsp;</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"><span class="remove_compare">remove</span><br>thumb1</td>
<td class="center"><span class="remove_compare">remove</span><br>thumb2</td>
</tr>
</tbody>
</table>

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':'bb'}

$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 += '<br><span class="remove_compare">remove</span>'
                        }

cell.html(value)

oCompareTable[name].append(cell)

})

$compareTableHeader.attr('colspan', $compareTable.find('tbody > tr:first > td').size() )

})

$compareTable.on('click','.remove_compare',function(){

    var cell = $(this).parents('td:first');

    var index  = cell.parent().children().index(cell);

    $compareTable.trigger('remove_column',index);

})

$('.remove_compare').click(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);

})