最近项目中使用到一个table表格，表格的样子如下：
可以修改数量，以及折扣，对应的最终价会相应的变化。
随手写了份插件，命名为JTable，可以给热爱jquery 的友友们一个参考：
代码如下：
/**
* Created by oshine on 14-7-23.
*/
(function($){
var JTable = function(setting){ var defaultSetting = { header:["服务内容","数量","单价(元)","总价(元)","量词","原价(元)","折扣","最终价(元)"],
items:[
{name:"默认内容1",num:1,defaultPrice:300},
{name:"默认内容2",num:1,defaultPrice:300},
{name:"默认内容3",num:1,defaultPrice:300},
{name:"默认内容4",num:1,defaultPrice:300}
],
unit:"半年",
discount:100,
serve_id:0,
id:0
}; setting = $.extend(defaultSetting,setting); this.header = setting.header;
this.container = setting.container;
this.items = setting.items;
this.discount = setting.discount*100;
this.unit = setting.unit;
this.serve_id = setting.serve_id;
this.name = setting.name;
this.default_price = setting.default_price;
this.id = setting.id;
this.isDesign = setting.isDesign;
this.init();
} JTable.prototype = {
init:function(){ var self = this;
self.refresh();
},
refresh:function(){
var self = this;
console.dir(self.items);
$(self.container).html(self.buildTable()+self.buildData()); $(self.container).find("input[name=child-num]").unbind();
$(self.container).find("input[name=child-num]").change(function(){ var k = $(this).parent().parent().attr("data-id");
self.items[k].num = $(this).val(); self.refresh();
}); $(self.container).find("input[name=package-discount]").change(function(){
self.discount = $(this).val();
self.refresh();
}); }, buildTable:function(){
return "<table>"+this.buildHeader()+this.buildBody()+"</table>";
}, jsonData:function(){
return JSON.stringify({id:this.id,serve_id:this.serve_id,isDesign:this.isDesign,name:this.name,default_price:this.default_price,discount:this.discount,unit:this.unit,cost_price:this.getCostPrice(),final_price:this.getFinalPrice(),items:this.items});
},
buildData:function(){
return "<input type='hidden' contract='true' value='"+this.jsonData()+"' name='data'/>";
}, buildHeader:function(){ var html = "<thead><tr>"; $.each(this.header,function(k,v){
html+="<th>"+v+"</th>";
})
return html+"</tr></thead>";
}, getCostPrice:function(){
var costPrice = 0; $.each(this.items,function(k,v){costPrice+=(v.num* v.defaultPrice);});
return costPrice;
},
getFinalPrice:function(){
return this.getCostPrice()*(this.discount/100);
},
buildBody:function(){
var self = this;
var html = "<tbody>";
var length = self.items.length;
$.each(this.items,function(k,v){
var tr = "<tr data-id="+k+">";
if(k==0){
tr+='<td class="item-name">'+ v.name+'</td>'+
'<td><input class="text-field" type="text" value="'+ v.num+'" name="child-num"></td>'+
'<td>'+ v.defaultPrice+'</td>'+
'<td>'+ (v.num*v.defaultPrice)+'</td>'+
'<td rowspan="'+ length+'">'+self.unit+'</td>'+
'<td rowspan="'+length+'">'+self.getCostPrice()+'</td>'+
'<td rowspan="'+ length+'"><input class="text-field" type="text" value="'+self.discount+'" name="package-discount"/>%</td>'+
'<td rowspan="'+ length+'">'+self.getFinalPrice()+'</td>';
}else
{
tr+='<td class="item-name">'+ v.name+'</td>'+
'<td><input class="text-field" type="text" value="'+ v.num+'" name="child-num"></td>'+
'<td>'+ v.defaultPrice+'</td>'+
'<td>'+ (v.num*v.defaultPrice)+'</td>';
}
tr+="</tr>";
html+=tr;
});
return html+"</tbody>";
}
} $.fn.extend({
JTable:function(){
var data = eval('('+$(this).attr("data")+')');
var setting = $.extend({container: $(this)},data);
return new JTable(setting);
}
});
})($);
使用：
HTML:
<div data="{'id':'7073','quoted_id':'616','uid':'176','serve_id':'2','name':'无线端站外推广套餐','default_price':'16800.00','discount':'0.9000','final_price':'15120.00','percentage':null,'description':'','unit':'季度','children':null,'is_design':null,'items':[{'id':'57760','packageId':'7073','name':'无线站外推广','num':'3','defaultPrice':'2400.00','unit':'季度','finalPrice':'7200.00','isDesign':null},{'id':'57761','packageId':'7073','name':'无线站外推广维度优化','num':'1','defaultPrice':'1200.00','unit':'季度','finalPrice':'1200.00','isDesign':null},{'id':'57762','packageId':'7073','name':'无线站外推广周报（数据分析+优化建议）','num':'1','defaultPrice':'2400.00','unit':'季度','finalPrice':'2400.00','isDesign':null}]}" class="constract-JTable">
</div>Javascript:
$(document).ready(function(){
$(".constract-JTable").JTable();
});代码写的一般般，可以优化下哦。