問(wèn)題描述

如圖：1.左邊兩側(cè)的表格都是點(diǎn)擊 上邊“新增”按鈕動(dòng)態(tài)添加出來(lái)的。點(diǎn)擊左側(cè)表格某一行,可以在右側(cè)創(chuàng)建表格(任意多少行都行),左右是一對(duì)多關(guān)系。2.想在左側(cè)新增行的時(shí)候,創(chuàng)建一個(gè)獨(dú)立對(duì)象(意思就是每個(gè)行對(duì)應(yīng)的對(duì)象都不一樣), 然后右側(cè)點(diǎn)擊新增后,新建出來(lái)的行,是帶幾個(gè)下拉菜單的,用戶(hù)選完之后,就會(huì)點(diǎn)擊開(kāi)始填報(bào),在點(diǎn)擊開(kāi)始填報(bào)按鈕時(shí),需要把右邊的數(shù)據(jù)和左邊的數(shù)據(jù),都存進(jìn)左邊某一行的對(duì)象里。(左邊每一行對(duì)應(yīng)一個(gè)對(duì)象)3.左右表格上方都有’刪除’按鈕,如果點(diǎn)擊左側(cè)’刪除’按鈕,那么這一行的存儲(chǔ)對(duì)象就被刪了,于是右邊和它對(duì)應(yīng)的數(shù)據(jù)也沒(méi)餓了。如果選中右側(cè)某一行,點(diǎn)擊’刪除’,那么只在左側(cè)的對(duì)象里刪除右側(cè)這一行的數(shù)據(jù)存儲(chǔ)。

框架：用了Bootstrap jQuery

下面是代碼只有我說(shuō)的添加tr刪除tr的功能實(shí)現(xiàn)。并沒(méi)有創(chuàng)建對(duì)象和添加數(shù)據(jù),有沒(méi)有老哥有思路的,在線等,急！！！

代碼：

<p class='col-md-5 clearfix'><button class='button1'>新增</button><button class='button1_del'>刪除</button><table border='1px solid #000' class='text-center'> <thead class='zType_thead text-center'><tr> <th></th> <th>納稅人識(shí)別號(hào)</th> <th>納稅人名稱(chēng)</th></tr> </thead> <tbody class='zType_tbody'> </tbody></table> </p> <p class='col-md-offset-1 col-md-5'><button class='button2'>新增</button><button class='button2_del'>刪除</button><button type='submit'>開(kāi)始填報(bào)</button><form method='post'> <table border='1px solid #000'><thead> <tr class='zType_table_th'><th>計(jì)算期類(lèi)型</th><th>期間</th><th>征收方式</th> </tr></thead><tbody class='zType_all'></tbody> </table></form> </p>

js代碼：

//點(diǎn)擊選中右側(cè)表格的某一行$(’.zType_all’).on(’click’,’tr’,function(){//點(diǎn)擊某一行 此行背景色改變,其他行恢復(fù)白色。點(diǎn)擊的那一行添加了name屬性,然后刪除其他tr的name值,為的是之后聯(lián)系起來(lái),有個(gè)name屬性作為橋梁,比如刪除,就可以在刪除掉對(duì)應(yīng)帶有name值的tr$(’.zType_all’).children().css({'background':'#fff','color':'#000'}).removeAttr(’name’); $(this).css({'background':'#bfaadc','color':'#000'}); if(!$(this).attr(’name’)){ $(this).attr('name',’zType_tr_checked1’); }})//右側(cè)刪除按鈕 點(diǎn)擊刪除帶有name的tr$(’.button2_del’).on(’click’,function(){ $(’tr[name=zType_tr_checked1]’).remove();})//左側(cè)添加按鈕$(’.button1’).on(’click’,function(){ $(’.zType_tbody’).append(’<tr><td><span class='glyphicon glyphicon-chevron-right'></span></td><td><input type='text' name='shibiehao'></td><td><input type='text' name='mingcheng'></td></tr>’);})//選中左側(cè)表格的tr$(’.zType_tbody’).on(’click’,’tr’,function(){ //依然還是點(diǎn)擊某一行 此行背景色改變,其他行恢復(fù)白色。點(diǎn)擊的那一行添加了name屬性,然后刪除其他tr的name值,為的是之后聯(lián)系起來(lái),有個(gè)name屬性作為橋梁,比如刪除,就可以在刪除掉對(duì)應(yīng)帶有name值的tr $(’.zType_tbody’).children().css({'background':'#fff'}).removeAttr(’name’); $(this).css({'background':'#bfaadc'}).children().eq(0).children() if(!$(this).attr(’name’)){ $(this).attr('name',’zType_tr_checked2’); }})//點(diǎn)擊左側(cè)刪除按鈕,刪掉左側(cè)選中的tr$(’.button1_del’).on(’click’,function(){ $(’tr[name=zType_tr_checked2]’).remove();})

問(wèn)題解答

回答1：

簡(jiǎn)單說(shuō)下我的思路：每個(gè) DOM 結(jié)構(gòu)維護(hù)一個(gè)數(shù)據(jù)對(duì)象，假設(shè)你的 HTML 結(jié)構(gòu)為(emmet語(yǔ)法)：

.app-test > .col-md-5.app-test-taxpayer + .col-md-5.app-test-report

那么：

上面分為三個(gè)組件

.app-test 負(fù)責(zé)維護(hù)所有納稅人數(shù)據(jù)（即左側(cè)表格）；

左側(cè)列表的每個(gè) tr 維護(hù)對(duì)應(yīng)納稅人的數(shù)據(jù)（即右側(cè)表格）；

兩側(cè)的所有 tr 都可以視為一個(gè)小的組件 —— 麻雀雖小五臟俱全；

總結(jié)出為：整個(gè)功能組件 > 左側(cè) tr 組件 + 右側(cè) tr 組件；

你可以理解為父子組件傳值；

大致實(shí)現(xiàn)如下：首先，兩個(gè)表格屬于一個(gè)功能模塊，假設(shè)為 TaxesReport:

(function($){ // 左側(cè) tr 組件 var TaxesReportTaxpayer = function(trs){return this; };// 右側(cè) tr 組件 var TaxesReportReporter = function(trs, taxpayer){// 當(dāng)前納稅人的報(bào)表，對(duì)應(yīng)右側(cè)的列表?xiàng)l目this.reports = []; return this; };// 一個(gè)獨(dú)立的功能模塊 var TaxesReport = function(element){// 全部納稅人，即左側(cè)列表對(duì)應(yīng)的數(shù)據(jù)源this.taxpayers = [];// 當(dāng)前選擇的納稅人，即左側(cè)列表中的紫色高亮行this.currentTaxpayer = null; };// 應(yīng)用實(shí)例 - 假設(shè)： .test > .col-md-5.clearfix var trDemo = new TaxesReport( $(’.app-test’) ); })(jQuery);

TaxesReportTaxpayer 和 TaxesReportReporter 都需要傳入一個(gè) TaxesReport 實(shí)例，用于【子組件調(diào)用父組件】 方法或數(shù)據(jù)

點(diǎn)擊左側(cè)新建按鈕新建納稅人：

// TaxesReport() 中var _that = this, $taxpayerAdd = $(’.button1), $taxpayerList = $(’.zType_tbody’); // 新建納稅人 $taxpayerAdd.on(’click’, function(){ // 實(shí)例化納稅人組件 var taxpayer = new TaxesReportTaxpayer(_that);// 增加行 $taxpayerList.append( taxpayer.item );// 新增數(shù)據(jù) _that.setTaxpayer( taxpayer.data );// 自動(dòng)高亮 if(!_that.currentTaxpayer) {_that.currentTaxpayer = taxpayer; }});

右側(cè)新增納稅人的報(bào)表類(lèi)型，如：

// TaxesReport() 中var _that = this, $reportAdd = $(’.button2’), $reportList = $(’.zType_all’); // 新增納稅人報(bào)表類(lèi)型$reportAdd.on(’click’, function(){ // 請(qǐng)從左側(cè)選擇一個(gè)納稅人 if( !_that.currentTaxpayer ) {console.log(’請(qǐng)從左側(cè)選擇一個(gè)納稅人’);return; }// 實(shí)例化報(bào)表組件 var report = new TaxesReportReporter(_that);// 增加行 $reportList.append( report.item );// 增加數(shù)據(jù) // _that.currentTaxpayer.setReport(report.data) _that.currentTaxpayer.item.trigger(’setReport’, report.data);// 查看是否添加成功 console.log( _that.currentTaxpayer.reports );});

刪除的時(shí)候，除了刪除對(duì)應(yīng)的 tr 結(jié)構(gòu)，刪除 tr 對(duì)應(yīng)的數(shù)據(jù)，涉及到的兩個(gè)數(shù)據(jù)對(duì)象（左側(cè)的 taxpayers 和 右側(cè)的 reports） 都是數(shù)組結(jié)構(gòu)，你可以為自定義鍵名方法，為新的實(shí)例（納稅人或報(bào)表）創(chuàng)建唯一標(biāo)識(shí)，并使用 <tr data-identify='唯一標(biāo)識(shí)'>···</tr> 建立起取值參數(shù)。

鑒于你可能都是靜態(tài)數(shù)據(jù)（非從數(shù)據(jù)庫(kù)中取出的帶有主鍵標(biāo)識(shí)的數(shù)據(jù)），且可能刪除數(shù)組中的任意一個(gè)條目進(jìn)而導(dǎo)致數(shù)組下標(biāo)丟失，所以，最好的方法是建立一個(gè)可創(chuàng)建不重復(fù)值的方法，用以給生成的組件（左側(cè)或右側(cè)）生成并添加一個(gè)唯一標(biāo)識(shí)。

回答2：

產(chǎn)生一個(gè)數(shù)據(jù)緩存，在 key-model 的形式保存數(shù)據(jù)，右邊的 model 里有一個(gè) children 保存對(duì)應(yīng)的右側(cè)數(shù)據(jù)

左側(cè)切換的時(shí)候，直接從 key-model 數(shù)據(jù)緩存里找到對(duì)應(yīng)的 model.children，重繪右側(cè)的列表

左側(cè)添加刪除的時(shí)候?qū)?yīng)的從 key-model 數(shù)據(jù)緩存里添加刪除就好

右側(cè)添加刪除的時(shí)候也是一樣的，這個(gè)時(shí)候可以對(duì)找到對(duì)應(yīng)的 model.children

由于使用 jQuery，jQuery 可以通過(guò) data() 把數(shù)據(jù)附加到 DOM 上，所以上述 key-model 可以直接采用之種形式把每個(gè) model 附加到每行(左側(cè))的 DOM 上，右側(cè)附加不附加問(wèn)題都不大

思路如此，代碼你可以先嘗試寫(xiě)下