最近項目中使用到一個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(); });

?

代碼寫的一般般，可以優化下哦。

轉載于:https://www.cnblogs.com/oshine/p/3894786.html

總結

以上是生活随笔為你收集整理的JTable的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。